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>

Please rewrite this question using proper punctuation, paragraphs and show some code you already tried — mplungjan
– mplungjan, Commented Feb 3, 2017 at 14:06
#id should be unique, $("#id").each(...) could cause selector errors. Better to use classes class="input-id", class="input-name", etc... — ramabarca
– ramabarca, Commented Feb 3, 2017 at 16:32

gus27 · Accepted Answer · 2017-02-04 10:15:13Z

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>

Thanks sir, its work. next i want to add new row input dynamically, how to set increment data-group for new row sir?
@fadlihudaya I extended my snippet by a function to insert new rows. You have to keep track of the data-group by a global variable (e.g. groupCount).

Collectives™ on Stack Overflow

Multiple dynamic input add event jquery and call ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related