Multiple dynamic input add event jquery and call ajax

Question

I have dynamic multiple input inside table.

I want to add event on every id textbox, add event on every quantity too and call ajax. last, add event on subtotal when value change, add new row multiple input.

can you help me please?

<td><input type="text" maxlength="13" name="id[]" id="id" required></td>
<td><input type="text" name="name[]" id="name" readonly required></td>
<td><input type="text" name="quantity[]" id="quantity" required></td>
<td><input type="text" name="price[]" id="price" readonly required></td>
<td><input type="text" name="subtotal[]" id="subtotal" readonly required></td>

<script>
$(document).ready(function(){
    $("#id").each(function(index, item){
        $(item).on("change paste keyup", function(){
            var id = $(this).val();
            $.ajax({  
                dataType: 'json',
                url:"load_product.php",  
                method:"POST",  
                data:{id:id},  
                success:function(data) {  
                    $('#name').val(data.name);
                    $('#price').val(data.price);
                }  
            });
        });
    });

    $("#quantity").on("change paste keyup", function(){
        var qty = $(this).val();
        var price = $('#price').val();
        var subtotal = qty * price;
        $('#subtotal').val(subtotal);
    });
});
</script>

Answer 1

Your scribble shows two rows of input fields. If the id fields in both rows contain id="id" there is a possible problem: ids have to be unique. Better add a number to the id (e.g. id="id1") or use class or data- attributes.

If you furthermore want to add rows dynamically to your table you should use jQuery's on function with the selector parameter. Otherwise new elements will not be bound automatically to the event.

This is a possible solution using data- attributes including a button to insert new rows:

$(document).ready(function(){
    var groupCount = 0;
  
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
    };
  
    var rowTemplate = '<tr>'+
        '<td><input type="text" size="3" maxlength="13" name="id[]" data-group="%group%" data-id="id" required></td>'+
        '<td><input type="text" size="3" name="name[]" data-group="%group%" data-id="name" readonly required></td>'+
         '<td><input type="text" size="3" name="quantity[]" data-group="%group%" data-id="quantity" required></td>'+
         '<td><input type="text" size="3" name="price[]" data-group="%group%" data-id="price" value="4" readonly required></td>'+
         '<td><input type="text" size="3" name="subtotal[]" data-group="%group%" data-id="subtotal" readonly required></td>'+
         '</tr>';
   
    for (var i=0; i<2; i++) {
        groupCount++;
        $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount));
    }
  
    $(document).on("change paste keyup", "input[data-id='id']", function(){
        var id = $(this).val();
        var group = $(this).data('group');
   		console.log('id:', id, group);
    });

    $(document).on("change paste keyup", "input[data-id='quantity']", function(){
        var qty = $(this).val();
        var group = $(this).data('group');
        var price = $("input[data-id='price'][data-group='"+group+"']").val();
        var subtotal = qty * price;
        $("input[data-id='subtotal'][data-group='"+group+"']").val(subtotal);
    });
  
    $("#btnadd").on('click', function() {
        groupCount++;
        $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount));      
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tr>
  <th>id</th>
  <th>name</th>
  <th>qty</th>
  <th>price</th>
  <th>subtotal</th>
</tr>
</table>
<button id="btnadd">New row</button>