Получение значения динамически созданного текстового поля с помощью jquery

Question

Мне тяжело получить значение моих динамически добавленных текстовых полей. Я использую функцию $.each для итерации всех текстовых полей в соответствии с ее id и индексом в пределах 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); 
    }); 
}); 

Это не работает. Может ли кто-нибудь сказать мне, как я могу это исправить?

Answer 1

У вас нет элемента с идентификатором student_grde_G[] Использование wild card starts с.

Live Demo

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

Answer 2

Вы можете просто использовать параметр элемента:

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

ИЛИ с @ ответ Адиль в сочетании:

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

Answer 3

Добавлен новый класс ко всему тексту Ящики '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"> 

И JQuery в

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

Answer 4

Выбор вы используете для каждого не соответствует тому, что вы думаете. [] предназначен для сопоставления атрибутов элементов.

Э.Г. '$ ("img [alt]")' выбирает все теги img с атрибутом alt и $ ("img [alt = foo]") 'выбирает все теги img, где значение атрибута alt равно foo.

Я предложил бы использовать класс вместо того, чтобы изменить входные элементы для

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

, а затем изменить Jquery к

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

использование i вас есть игнорирует последний элемент. Индекс (i) равен нулю, поэтому первое значение i равно 0 (которое в вашем примере ничего не выберет), а последнее - количество элементов минус один, что приводит к тому, что последний элемент никогда не будет выбран.

Однако, так как текущий элемент доступен как this в функции, предоставляемой каждому, вам не нужно беспокоиться о каких-либо «от одной» ошибки, если вы сделаете над изменением функции

Answer 5

Если вы хотите использовать префиксные идентификаторы для входов, которые вы можете использовать с помощью подстановочного значка jquery. Кроме того, вместо использования селектора jquery для извлечения значения класса вы можете просто использовать элемент, переданный в функцию. Как уже упоминалось, добавление класса к входу может быть более эффективным способом продолжения.

$('#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); 
     }); 
}); 

Пример: http://jsbin.com/axenuj/1/edit

Answer 6

В целом, его лучше использовать класс для него, потому что идентификаторы являются уникальным идентификатором, вы не должны работать с массивами в них. если вы хотите обрабатывать их на стороне сервера после того, как пост лучше сделать это таким образом:

<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"> 

и для вашего сценария

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

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


    }); 

Edit: так JQuery 1.7, вы должны связать свое мероприятие с .on()

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

ИЛИ если кнопка сохранения будет динамически слишком

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