Clone html form with oninput event

Question

I have a script as shown below:

<script src="jquery.min.js"></script>
<script>
$(function () {
$('#btnAdd').click(function () {
    var num     = $('.clonedInput').length, 
        newNum  = new Number(num + 1), 
        newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); 
    newElem.find('.input_1').attr('id', 'ID' + newNum + '_a').attr('name', 'ID' + newNum + '_a').val('1');
    newElem.find('.input_2').attr('id', 'ID' + newNum + '_b').attr('name', 'ID' + newNum + '_b').val('1');
    newElem.find('.output_1').attr('id', 'ID' + newNum + '_o').attr('name', 'ID' + newNum + '_o').val('');
    $('#entry' + num).after(newElem);
    $('#ID' + newNum + '_title').focus();
});
});
</script>

<form action="#" id="form" oninput="o.value = parseInt(a.value) * parseInt(b.value)">
<div id="entry1" class="clonedInput">
    <input class="input_1" name="a" type="text" value="1"> *
    <input class="input_2" name="b" type="text" value="1"> =
    <output class="output_1" name="o"></output>
</div>
</form>
<input type="button" id="btnAdd" value="add row">

If this code is executed, the result of multiplying the numbers in the first line will be given automatically and correctly. But if adding a line (i.e., Second line, etc.), Multiplication between two inputs is not performed automatically. Is there an error in my script that?

Answer 1

You must change your input event handler. You can use a function called updateChangethat reads and updates the values ​​of your new nodes.

id entry1, . .

<form action="#" id="form">
    <div id="entry1" class="clonedInput">
        <input class="input_1" id="ID1_a" type="text" value="1"> *
        <input class="input_2" id="ID1_b" type="text" value="1"> =
        <output class="output_1" id="ID1_o"></output>
    </div>
</form>
<input type="button" id="btnAdd" value="add row">

JS

updateChange, , input event output.

$(function() {
   function updateChange() {
     var childNodes = this.children;
     var childNodesLen = this.children.length;
     var i=0;
     var inputs,outputs;
     for (;i<childNodesLen;i++){
       inputs = childNodes[i].getElementsByTagName('input');
       outputs = childNodes[i].getElementsByTagName('output');
       outputs[0].value = parseInt(inputs[0].value) * parseInt(inputs[1].value);
     }
  };
  document.getElementById('form').addEventListener('input',updateChange);    

$('#btnAdd').click(function() {
  var num = $('.clonedInput').length,
   newNum = new Number(num + 1),
   newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');
   newElem.find('.input_1').attr('id', 'ID' + newNum + '_a').attr('name', 'ID' + newNum + '_a').val('1');
   newElem.find('.input_2').attr('id', 'ID' + newNum + '_b').attr('name', 'ID' + newNum + '_b').val('1');
   newElem.find('.output_1').attr('id', 'ID' + newNum + '_o').attr('name', 'ID' + newNum + '_o').val('');
   $('#entry' + num).after(newElem);
   $('#ID' + newNum + '_title').focus();
  });
 });

JavaScript DOM. jQuery; -)