How do I get multiple textbox values that are dynamically created in jquery

Question

How do I get multiple textbox values that are dynamically created in jquery

Sample code:

<?php
$i=1;
while($i<10)
{
     echo "<input type='textbox' class='qty' id='qty_$id'>";
     echo "<input type='textbox' class='item' id='item_$id'>";
     $i++;
}
echo '<input class="btn_transaction" id="btn_update" type="button" style="width:auto" value="Update">';


?>

jquery

<script>
jQuery(document).ready(function(e){
  $("#btn_update").click(function() {
        $.each($('.qty'), function() {
        var qty =  $(this).val();
        alert(qty);  // im getting qty here. In the same way i want item also, how to get item value here
        jQuery.post('../ajax/ajax_cart.php',{section:'update_tocart',qty:qty},function(data){

        });             
     });

  });

});            
</script>

thanks in advance :)

Answer 1

DEMO

Try this

$("#btn_update").click(function() {
        $(".qty").each(function() {
           var qty =  $(this).val();
           alert(qty);      
     });

  });

Hope this helps,Thank you

Answer 2

Try with .next() like

var item = $(this).next('.item').val();

So it would be

$('.qty').each(function() { // Or     $.each('.qty' , function() {
    var qty =  $(this).val();
    var item = $(this).next('.item').val();
 });

See the FIDDLE And FIDDLE2

Answer 3

jQuery(document).ready(function(e){
$("#btn_update").click(function() {
    var data = {};
    $( "input" ).each(function() {
        data[$(this).attr('id')] = $(this).val();
        jQuery.post('../ajax/ajax_cart.php',{section:'update_tocart',data:data},function(data){

        });             
    });
});

});

Try above!! You can find all input elements! You can then store it in a json object and pass to ajax call.

Answer 4

Try this

$.each($('.qty'), function() {
    var qty =  $(this).val();
    var item = $(this).siblings('input.item').val();
});

Answer 5

try

$('.qty').each(function() { 

var qty =  $(this).val();
var item =  $(this).closest('.item').attr('value'); })

Answer 6

add class to all your textbox eg textbox

<script type="text/javascript">
    var Work = [];
var textboxes = document.getElementsByClassName('name_list');
var boxlengt = document.getElementsByClassName('name_list').length;
for(var i=0;i<boxlengt;i++){
    Work.push(textboxes[i].value)
}
Work = Work.toString();
</script>

All the values are being stored in the items array. Now its up to you how you want each values to be used.