CODEWITHSUNDEEP
jquery
Denisson de Souza
Denisson de Souza

Reputation: 65

How to get value from dynamically created inputs jquery

Value from a added field return undefined.

my added input

 var i = 1;
$('#add_field').click(function(){
   i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea id="name" class="borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" id="price name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" id="qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" id="total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');

});

this is my jquery code to get values from inputs

$(document).on('change', '#dynamic_field', function(event){


    var id = $('#prod_id').val();  <----I got the id.

    var name = $('#name').val();  <-----cant get value name 
    var price = $("#price").val();  <-----cant get value price 
    var qty = $("#qty").val();  <-----cant get value qty 
    var total = $("#total").val();  <-----cant get value total

any idea? thanks

Upvotes: 1

Views: 5244

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Change your ids to classes, your #dynamic_field isn't a input so you don't have a change event,

Lets say you change the values on the price input:

var i = 1;
    $('#add_field').click(function(){
       i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea class="name borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');
    
    });


    $('body').on('change','.price',function(){
        var closestParent = $(this).closest('tr');//get the values relative to the parent
        var name = closestParent.find('.name').val(); 
        var price = closestParent.find(".price").val(); 
        var qty = closestParent.find(".qty").val(); 
        var total = closestParent.find(".total").val(); 
        console.log(name,price,qty,total);
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_field">Add</button>
<div id="dynamic_field"></div>

Upvotes: 4

shriidhar
shriidhar

Reputation: 427

#dynamic_field is not input, so it does not have change event. Add change event handler for input and textarea.

Consider, changing id selector to class selectors, as id selector will return you only first matching element, so this code won't work for subsequent rows. 

 var i = 1;
$('#add_field').click(function(){
   i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea id="name" class="borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" id="price" name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" id="qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" id="total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');

});

$('#dynamic_field').on('change', 'input, textarea', function(event){


    var id = $('#prod_id').val(); 

    var name = $('#name').val();  
    var price = $("#price").val();
    var qty = $("#qty").val();  
    var total = $("#total").val(); 
    
    console.log(name, price, qty, total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dynamic_field">
</table>
<button id="add_field">
Add Fields
</button>

Also, avoid generating HTML in JS (as string) and consider using Templates. eg. -Jquery Templates

Upvotes: -1

Related Questions