CODEWITHSUNDEEP
javascriptjquery
Chris Campbell
Chris Campbell

Reputation: 313

Dynamic cell calculation for each row

Im trying to create a tbale with dynamic cells and a calcultion is performed after each row. However, I cannot seem to get the element total for each rw in the table, it only ever ammneds the firt or comes out 'undefined'.

Code for creating table:

$(document).ready(function () {

    $(document).on('click', '.add', function () {
        var html = '';
        html += '<tr onclick="calc(this)">';
        html += '<td><input type="text" name="item_name[]" oninput="calc()" class="form-control item_name" /></td>';
        html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
        html += '<td><input type="text" name="item_unit[]" class="form-control item_unit" /></td>';
        //NEW ONES!!!!!!!!!!!!!!!
        html += '<td><select name="item_glass[]" class="form-control item_glass"><option value="">Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
        html += '<td><select name="item_splash[]" class="form-control item_splash"><option value="">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';

        html += '<td><input type="text" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
        html += '<td><select name="item_HDiam[]" class="form-control item_HDiam"><option value="">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
        html += '<td><input type="text" name="item_CQuan[]" class="form-control item_CQuan" /></td>';

        //Total
        html += '<td><input type="text" name="item_Total[]" id="item_total[]" class="form-control item_total" disabled/></td>';


        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Row<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });

Code I've tried for testing get element and change it for each row:

function calc(x){

  var i = x.rowIndex;
  document.getElementById("item_total[]").value = "test";

}

function calc(x){

  var i = x.rowIndex;
  document.getElementById("item_total[]")[i].value = "test";

}

function calc(x){

  var i = x.rowIndex;
  document.getElementByName("item_total")[i].value = "test";

}

None of these work and i've no idea how to fix this?

Upvotes: 1

Views: 65

Answers (1)

Asons
Asons

Reputation: 87211

May I suggest you use querySelector() instead. With it you can find elements using CSS selectors, like this, using the attribute selector:

document.querySelector('[name="item_name[]"]')

Updated based on a comment

If you have multiple input with the same name, you could use querySelectorAll() and loop the result, e.g.

var els = document.querySelectorAll('[name="item_name[]"]');
for (var i = 0; i < els.length ; i++) {

   // do something with e.g. each value
   var val = parseFloat(els[i].value);   // or parseInt(), so it becomes a number

}

Do note, the inner brackets might needs to be escaped, like this, to work properly cross browsers:

'[name="item_name\\[\\]"]'

Notes:

Your getElementById() won't work since the item_name[] is not an id.

Your getElementByName() won't work since you misspelled it. Should be getElementsByName() with an s in Elements

Upvotes: 2

Related Questions