Как выбрать родительскую форму в зависимости от того, какая кнопка отправки нажата?
У меня есть веб-страница с 3 формами. Не вложены, только одна за другой (они почти идентичны, только одна скрытая переменная отличается). Пользователь заполняет только одну форму, и я хотел бы проверить / etc все формы с помощью только одного JS-скрипта.
Итак, как же, когда пользователь нажимает кнопку отправки формы №1, сделать так, чтобы мой js-скрипт работал только с полями в форме1? Я понимаю, что это как-то связано с $ (this) .parents, но я не уверен, что с этим делать.
Мой сценарий проверки (который я использовал в другом месте, только с одной формой) выглядит примерно так:
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var nameVal = $("#name").val();
if (nameVal == '') {
$("#name").after('Please enter your name.');
hasError = true;
}
if (hasError == false) {blah blah do all the processing stuff}
Так что мне нужно заменить такие вещи, как $ ("# name"). Val () на $ (this) .parents ('form'). Name.val ()? Или есть лучший способ сделать это?
Спасибо!
Ответы 5
Вы можете выбрать такую форму:
$("#submit").click(function(){
var form = $(this).parents('form:first');
...
});
Однако обычно лучше прикрепить событие к событию отправки самой формы, так как оно будет срабатывать даже при отправке нажатием клавиши ввода в одном из полей:
$('form#myform1').submit(function(e){
e.preventDefault(); //Prevent the normal submission action
var form = this;
// ... Handle form submission
});
Чтобы выбрать поля внутри формы, используйте контекст формы. Например:
$("input[name='somename']",form).val();
или $ ("ввод, текстовое поле, выберите", форма)
Почему нельзя использовать var form = $(this).form, как в обычном Javascript: function onClick(button) { var form = button.form; } ???
Чтобы получить форму, в которой находится отправка, почему бы просто не
this.form
Самый простой и быстрый путь к результату.
зачем нужна оболочка jquery!
Потому что это тоже было задано как вопрос jQuery. И поскольку принятый ответ также возвращает объект jQuery, я подумал, что это было бы хорошо. Оставим в стороне все «зачем это делать с jQuery, если можно и без него».
Эйлин: Нет, это не var nameVal = form.inputname.val();. Должно быть либо ...
в jQuery:
// you can use IDs (easier)
var nameVal = $(form).find('#id').val();
// or use the [name=Fieldname] to search for the field
var nameVal = $(form).find('[name=Fieldname]').val();
Или в JavaScript:
var nameVal = this.form.FieldName.value;
Или комбинация:
var nameVal = $(this.form.FieldName).val();
С помощью jQuery вы даже можете перебрать все входные данные в форме:
$(form).find('input, select, textarea').each(function(){
var name = this.name;
// OR
var name = $(this).attr('name');
var value = this.value;
// OR
var value = $(this).val();
....
});
Я нашел этот ответ, когда искал, как найти форму элемента ввода. Я хотел добавить примечание, потому что теперь есть способ лучше, чем использовать:
var form = $(this).parents('form:first');
Я не уверен, когда он был добавлен в jQuery, но метод closest () делает именно то, что нужно, более чисто, чем использование parent (). Самый близкий код можно изменить на этот:
var form = $(this).closest('form');
Он проходит вверх и находит первый элемент, который соответствует тому, что вы ищете, и останавливается на нем, поэтому нет необходимости указывать: first.
Я использовал следующий метод, и он отлично сработал для меня
$('#mybutton').click(function(){
clearForm($('#mybutton').closest("form"));
});
$('#mybutton').closest("form") помог мне.
Вы также можете использовать для выбора всех дочерних элементов ввода: $ (this) .children (). Filter ("input")