Как выбрать родительскую форму в зависимости от того, какая кнопка отправки нажата?

У меня есть веб-страница с 3 формами. Не вложены, только одна за другой (они почти идентичны, только одна скрытая переменная отличается). Пользователь заполняет только одну форму, и я хотел бы проверить / etc все формы с помощью только одного JS-скрипта.

Итак, как же, когда пользователь нажимает кнопку отправки формы №1, сделать так, чтобы мой js-скрипт работал только с полями в form1? Я так понимаю, это как-то связано с $ (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 ()? Или есть лучший способ сделать это?

Спасибо!

Вы можете выбрать такую ​​форму:

$("#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).parents('form:first');

Я не уверен, когда он был добавлен в jQuery, но метод closest () делает именно то, что нужно, более чисто, чем использование parent (). С ближайшим кодом можно изменить на этот:

var form = $(this).closest('form');

Он проходит вверх и находит первый элемент, который соответствует тому, что вы ищете, и останавливается на нем, поэтому нет необходимости указывать: first.

Чтобы получить форму, в которой находится отправка, почему бы просто не

this.form

Самый простой и быстрый путь к результату.

Я использовал следующий метод, и он отлично сработал для меня

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") сделал трюк для меня.

Эйлин: Нет, это не так 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();
  ....
  });