JQuery / JS - Как выбрать родительскую форму, на основе которой нажимается кнопка отправки?

Question

У меня есть веб-страница с 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 ()? Или есть лучший способ сделать это?

Спасибо!

Answer 1

Вы можете выбрать форму следующим образом:

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

Answer 2

Я нашел этот ответ, когда искал, как найти форму элемента ввода. Я хотел добавить заметку, потому что теперь есть лучший способ, чем использовать:

var form = $(this).parents('form:first');

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

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

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

Answer 3

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

this.form

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

Answer 4

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

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

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

Answer 5

Эйлин: нет, это не "var nameVal = form.inputname.val ();" это должно быть либо ...

в Jquery:

// Вы можете использовать идентификаторы (проще)

var nameVal =  $(form).find('#id').val();

// или используйте [name = Fieldname] для поиска поля

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();
  ....
  });