Как ссылаться на элементы ввода в определенной области, когда есть несколько элементов ввода одного вида?

Question

Как выбрать данные для элементов ввода в определенной области?У меня есть одна и та же форма несколько раз (класс "foo-form), и я хочу убедиться, что я получаю значения для скрытых входных данных в пределах области отправляемой формы. Подразумевается ли область действия" this "?Синтаксис для выбора входного класса "foo-text" в рамках этого? Не стесняйтесь указывать мне на примеры в документах jquery - я не смог найти то, что искал.

$('.foo-form').submit(function() {
    // Store a reference to this form
    var $thisForm = $(this);

});


<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" />
</form>
<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" />
</form>
<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" /> // user clicks this submit button
</form>

Answer 1

Если вам нужны все скрытые элементы ввода из текущей формы, выполните следующие действия:

$('.foo-form').submit(function() {
    var $hiddenInputs = $('input[type="hidden"]', this);
});

Это даст вам список потенциально многих скрытых входных данных в только что отправленной форме. Если вы хотите получить именно тот, который имеет класс foo-text, тогда мы можем указать это и получить его значение:

$('.foo-form').submit(function() {
    var hiddenValue = $('input.foo-text', this).val();
});

Также помните, что если вы хотите предотвратить нормальную отправку формы (что вызывает изменение страницы), вы должны вернуть false в конце функции обратного вызова, которую вы определяете:

$('.foo-form').submit(function() {
    ...

    return false;
});

Answer 2

Стоит отметить, что хотя:

$('input[type="hidden"]',this);

работает, это немного быстрее (из-за способа, которым jQuery реализует контекстный поиск ) для использования:

$(this).find('input[type="hidden"]');

Не говоря уже о кратком (хотя и не обязательно эффективном ) использовании:

$(this).find('input:hidden');

jQuery API docs для :hidden псевдоселектор .

Answer 3

Использование селектора $(this) будет работать с текущим выбранным классом.Поэтому, если вы должны были сделать alert($('.foo-text', this).val());, вы должны получить значение скрытого типа ввода для конкретной формы, которую вы нажимаете «Отправить».Конечно, для того, чтобы что-то вернуть, необходимо указать значение скрытого поля формы.