DESIGN: Dropdown+Label+Button and Repeating row wise

Question

I have a design related question.

I have a bill to add product. One product is added per line. One Product added per line image

When I add a product, I also display its warranty in the Warranty column:

Selected product shows warranty in Warranty Column

But when I add any other product, I cannot display its Warranty. Cannot Display Warranty in subsequent products

My HTML where dropdown options are coming dynamically:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                <i class="fa fa-times"></i>
            </button>
        </td>
    </tr>
</tbody>

My JS for adding row to bill:

$(document).ready(function () {
    var counter = 0;
    $("#addrow").on("click", function () {
        var newRow = $("<tr class='text-center'>");
        var cols = "";
        cols += '<td><select name="bill_product[]"><option disabled selected value="">Select Product</option><cms:pages masterpage="product.php"><option value="<cms:show k_page_id />"><cms:show k_page_title /></option></cms:pages></select></td>';
        cols += '<td><input type="text" id="txtbox" name="txtbox" /></td>';
        cols += '<td><button type="button" class="ibtnDel btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
            counter++;
        });
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
                counter -= 1
            });
        });

My Code to display the warranty end date:

$(document).ready(function() {
    $("#myDropdown").change(function() {
        var selectedValue = $(this).val();
        $("#txtbox").val(selectedValue);
    });
});

ISSUE: I am unable to display the value of the warranty date on any product after the first one.

Please help.

P.S.: I am using CouchCMS to dynamically bring my values to the option tag of select.

`id` for `Warranty Date` has to be unique. You can try appending index to the id. Like for 1st row you can assign id as `txtbox1` and then set value like `$("txtbox1").val(selectedValue)` — user1579234, Jan 31 '19 at 15:36

score 1 · Accepted Answer · answered Feb 01 '19 at 11:12

Here's the solution I propose, I get rid off not-native JS by the way, it allows it to fit with any solution :

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                Delete
            </button>
        </td>
    </tr>
</tbody>

// Line removal
let delBtns = document.querySelectorAll(".del-btn");

[].forEach.call(delBtns, function(delBtn){
    delBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = document.querySelector("#line-"+line);

    lineToRemove.remove();
  })
});

// Input update
let productDropDowns = document.querySelectorAll("select");

[].forEach.call(productDropDowns, function(dropDown){
    dropDown.addEventListener('change', function(event){
    let line = event.target.dataset.line;

    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
});

// New line button
let count = 0;
let newLineButton = document.querySelector("#newLineTrigger");

newLineButton.addEventListener('click', function(){
    count++;
    let tableBody = document.querySelector('tbody');
  let newLine = document.createElement('tr');
  newLine.id = 'line-' + count;
  tableBody.appendChild(newLine);
  newLine = document.querySelector('#line-' + count);

  let col1 = document.createElement('td');
    let select = document.createElement('select');
  select.id = 'drop' + count;
  select.dataset.line = count;

  select.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })

  for(let i=0; i<3; i++){
    let option = document.createElement('option');
    option.value = i;
    option.innerText = 'option ' + i;
    select.appendChild(option);
  }

    col1.appendChild(select);

  let col2 = document.createElement('td');
  let textBox = document.createElement('input');
  textBox.id = 'textBox'+count;
  textBox.name = 'textBox'+count;
  col2.appendChild(textBox);

  let col3 = document.createElement('td');
  let newDelBtn = document.createElement('button');
  newDelBtn.className = "del-btn";
  newDelBtn.dataset.line = count;
  newDelBtn.innerText = "Delete";
  newDelBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = newLine;

    lineToRemove.remove();
  });
  col3.appendChild(newDelBtn);


    newLine.appendChild(col1);
    newLine.appendChild(col2);
    newLine.appendChild(col3);

  tableBody.appendChild(newLine);
});

score 0 · Answer 2 · answered Jan 31 '19 at 15:37

0

I don't see the triggerring element '#addrow' which adds the row. Could you update the fiddle to include this button, please?

answered Jan 31 '19 at 15:37

Arnaud Strill

66
1
7

You duplicate ids and names (txtbox), which isn't a valid practice. You didn't close the tr created in your function also. – Arnaud Strill Jan 31 '19 at 15:55

score 0 · Answer 3 · answered Jan 31 '19 at 15:45

0

The ids for all warranty input field is same, which is "txtbox". You can use the counter variable to have separate ids for all warranty fields.

answered Jan 31 '19 at 15:45

Sudipto Roy

948
8
15

i suppose you are in the couchcms forum too am i right? – Aashish Handa Jan 31 '19 at 16:09
could you help me with the same? Please! – Aashish Handa Jan 31 '19 at 16:34

DESIGN: Dropdown+Label+Button and Repeating row wise

3 Answers3