getting the value of dynamically created textbox using jquery

问题

I'm having a hard time with getting the value of my dynamically appended textboxes. I'm using the $.each function to iterate all of the textboxes according to its id and index within the id.

<input type="text"  id="student_grde_G[1]" >
<input type="text"  id="student_grde_G[2]" >
<input type="text"  id="student_grde_G[3]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

jQuery:

$('#save_grade_button').click(function (){
    $.each($('#student_grde_G[]'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

This doesn't work. Can anyone tell me how I can fix this?

回答1:

You can just use the item parameter:

$('#save_grade_button').click(function (){
     $('input[type=text]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

OR with @Adil's answer combined:

$('#save_grade_button').click(function (){
     $('[id^=student_grde_G]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

回答2:

Added a new class to all text boxes 'student_grde'

<input type="text"  class="student_grde" id="student_grde_G[1]" >
      <input type="text" class="student_grde" id="student_grde_G[2]" >
      <input type="text" class="student_grde" id="student_grde_G[3]" >


      <input type="button" id="save_grade_button" class="button" value="Save Grades">

And jquery to

$('#save_grade_button').click(function (){
    $.each($('.student_grde'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

回答3:

In general its better to use a class for it, because ids are a unique identifier, you should not work with arrays in them. if you want to handle them server side after a post you better do it this way :

<input type="text" class="studentGrade"  id="student_grde_G_1" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_2" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_3" name="studentGrade[]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

and for your script

$('#save_grade_button').click(function (){

         $('.studentGrade').each(function() {
           var grade =  $(this).val();
           alert(grade);
         });


     });

Edit: since jQuery 1.7, you should bind your event with .on()

$('#save_grade_button').on('click', function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

OR if the save button will be dynamically too

$(document).on('click', '#save_grade_button', 'gradeSaveClick' function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

回答4:

The selection you are using for the each does not match what you think. [] is meant for matching attributes of elements.

E.g. '$("img[alt]")' selects all img tags with an alt attribute and $("img[alt=foo]")' selects all img tags where the value of the alt attribute is foo.

I'd suggest to use a class instead change the input elements to

<input type="text" class="grades" id="student_grde_G[2]" >

and then change the jQuery to

$('#save_grade_button').click(function (){
    $.each($('grades'), function() {
        var grade =  $(this).val();
        alert(grade);
    });
});

the use of i you have ignores the last element. The index (i) is zero based so the first value of i is 0 (which in your example will select nothing) and the last is the count of elements minus one resulting in the last element never being selected.

However since the current element is accessible as this in the function provided to each, you don't need to worry about any "off by one" errors, if you make the above change to the function

回答5:

You do not have element with id student_grde_G[] Use wild card starts with.

Live Demo

$('#save_grade_button').click(function () {
  $.each($('[id^=student_grde_G]'), function (i, item) {
    var grade = $(this).val();
    alert(grade);
  });
});

回答6:

If you want to stick with prefixed ids for the inputs you can use the jquery wildcard selector. ALso instead of using a jquery selector to retrieve the value of the grade you can simply use the item passed into the function. As mentioned adding a class to the input may be a more efficient way to proceed.

$('#save_grade_button').click(function (){

   $.each($("input[id^='student_grde_G']"), function(i, item) { //uses wildcard selector

      var grade =  $(item).val();  //Use item instead of selector
          alert(grade);
      });
 });

Example: http://jsbin.com/axenuj/1/edit

来源：https://stackoverflow.com/questions/14232910/getting-the-value-of-dynamically-created-textbox-using-jquery