Hello, help me figure it out, there is a table with fields: sum, quantity, total. Made generation (at pressing the same fields drop out). In the first line, everything counts, but not in others.

<table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr> <th><?php echo $text_product_name; ?></th> <th><?php echo $text_model; ?></th> <th><?php echo $text_price; ?></th> <th><?php echo $text_count; ?></th> <th><?php echo $text_in_total; ?></th> <th> <a id="add_row" class="pull-left"><i class="fa fa-plus" aria-hidden="true"></i></a></th> </tr> </thead> <tbody> <tr id='addr0'> <th class="col-sm-3"> <input type="text" name="product_name" required class="form-control"> </th> <td class="col-sm-3"> <input type="text" name="model_product" class="form-control"> </td> <td > <input type="text" name="total" required class="form-control" id="i1" onchange=simplecheckout_reload()> </td> <td > <img src="/catalog/view/theme/default/assets/images/add/minus.png" border="0" onclick="jQuery(this).next().val(~~jQuery(this).next().val()-1);simplecheckout_reload('cart_value_decreased');"> <input type="text" name="quantity" id=i2 value="1" size="1" onchange="simplecheckout_reload('cart_value_changed')" > <img src="/catalog/view/theme/default/assets/images/add/plus.png" border="0" onclick="jQuery(this).prev().val(~~jQuery(this).prev().val()+1);simplecheckout_reload('cart_value_increased');"> </td> <td > <input type="number" name="oll_total" id=i3> </td> <td> </td> </tr> <tr id='addr1'></tr> </tbody> </table> $(document).ready(function(){ var i=1; $("#add_row").click(function(){ $('#addr'+i).html("<td><input type='text' name='product_name"+i+"' class='form-control'></td>" + "<td><input name='model_product"+i+"' type='text' class='form-control' />" + "</td><td><input name='total"+i+"' type='text' class='form-control' id='i1' onchange=simplecheckout_reload()></td>" + "<td><img src='/catalog/view/theme/default/assets/images/add/minus.png' border='0' onclick=jQuery(this).next().val(~~jQuery(this).next().val()-1);onchange=simplecheckout_reload()>" + "<input type='text' name='quantity' id='i2' value='1' size='1' onchange=simplecheckout_reload()>" + "<img src='/catalog/view/theme/default/assets/images/add/plus.png' border='0' onclick=jQuery(this).prev().val(~~jQuery(this).prev().val()+1);onchange=simplecheckout_reload();></td>" + "<td><input type='number' name='oll_total"+i+"' id='i3'></td>" + "<td><a id='delete_row' style='margin-right:30%;' class='pull-right minus'><i class='fa fa-minus' aria-hidden='true'></i></a></td></td>"); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); i++; }); $("#delete_row").click(function(){ if(i > 1 ){ $("#addr"+(i-1)).html(''); i--; } }); }); jQuery(document).on('click', '.minus', function(){ jQuery( this ).closest( 'tr' ).remove(); }); function simplecheckout_reload(){ var n1=document.getElementById('i1').value; var n2=document.getElementById('i2').value; document.getElementById('i3').value=Number(n1)*Number(n2); }
  • document.getElementById - finds a single element on the page. That is why the id attribute must be unique. - Igor
  • So it’s impossible to do the type id = 'i "+ i +"' - Sender1050
  • maybe there is some other way? - Sender1050

1 answer 1

document.getElementById - finds a single element on the page. That is why the id attribute must be unique.

You can do without id at all for input:

 function simplecheckout_reload(element){ var row = $(element).closest("tr"); var n1 = row.find("input[name='total']").val(); var n2 = row.find("input[name='quantity']").val(); row.find("input[name='oll_total']").val(Number(n1) * Number(n2)); }

onchange='simplecheckout_reload(this);'

  • Tell me what doesn't work when I insert onchange='simplecheckout_reload(this);' it works in the form itself, and when I insert it where it generates html it doesn't calculate, console.log (row); shows everything ok, what is wrong I can not understand can explain or show, thanks for the help. - Sender1050
  • this is what `value: 25.6 valueAsDate: null valueAsNumber: NaN` comes in when it is generated ([prevObject: n.fn.init[1], context: input#i1.form-control, selector: "input[name='oll_total']"]) - Sender1050
  • everything figured out doesn’t work because name='oll_total"+i+"' removed all foreclosures - Sender1050