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

Question

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 :)

SarathSprakash · Accepted Answer · 2013-08-23 13:45:03Z

3

DEMO

Try this

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

  });

Hope this helps,Thank you

answered Aug 23, 2013 at 13:45

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dipen Over a year ago

its really good for scenario like mine where fields are generated dynamically as per user requirement!!!

Deepak Biswal · Accepted Answer · 2013-08-23 12:53:58Z

0

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.

answered Aug 23, 2013 at 12:53

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

7 Comments

user2711038 Over a year ago

im not getting ur code. im new to jquery and json. can u please explain in breif. i want only those 2 text box values which are in while loop

Deepak Biswal Over a year ago

The above code will check all input fields in the DOM and then set in the data object. So the final data object will something like {qty:'value', item:'value'}, so now data = {qty:'value', item:'value'}. So now you can send the data object in ajax call and you collect it in ajax_cart.php page through $_POST['data'] as I am passing it like jQuery.post('../ajax/ajax_cart.php'{section:'update_tocart',data:data},function(data){});. If you have some other input field in your page which you don't want to post then in place of $( "input" ) you can filter your selector. Make sense!

user2711038 Over a year ago

how can i retrive values in ajax page.. can u give me sample.. i have to use foreach loop ryt?

Deepak Biswal Over a year ago

Yes, you have to do loop because may be your $_POST['data'] is more then 2 ans you are not really sure about that. So you can do a loop and then you can do whatever operation you want! Does that make sense?

user2711038 Over a year ago

data[$(this).attr('id')] = $(this).val(); what is 'id' refers to?

|

Amit · Accepted Answer · 2013-08-23 12:56:01Z

0

Try this

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

answered Aug 23, 2013 at 12:56

Amit

15.4k8 gold badges50 silver badges69 bronze badges

1 Comment

user2711038 Over a year ago

no not working... same error when i give alert(item) ---- undefined

GautamD31 · Accepted Answer · 2013-08-23 13:02:37Z

0

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

edited Aug 23, 2013 at 13:02

answered Aug 23, 2013 at 12:48

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

2 Comments

user2711038 Over a year ago

item is not coming. when i give alert --- item is not defined. i have used ur above code

user2711038 Over a year ago

no it is not working. it showing only last enterd values. i want all the values

vishal shah · Accepted Answer · 2013-08-23 13:29:00Z

0

try

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

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

edited Aug 23, 2013 at 13:29

answered Aug 23, 2013 at 13:05

vishal shah

2221 gold badge3 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2020-04-10 04:54:38Z

0

add class to all your textbox e.g 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.

edited Apr 10, 2020 at 4:54

CommunityBot

11 silver badge

answered Aug 23, 2013 at 13:12

Roseann Solano

7682 gold badges8 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

7 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

7 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related