Як вибрати головну форму на основі натискання кнопки подання?


124

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

Так як, коли користувач натискає кнопку для надсилання форми №1, я можу зробити, щоб мій js-скрипт мав справу лише з полями у form1? Я вважаю, це має щось спільне з $ (це) .динами, але я не впевнений, що з цим робити.

Мій сценарій перевірки (який я використовував в іншому місці, лише з однією формою) виглядає приблизно так:


$(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}

Тож чи потрібно мені замінити такі речі, як $ ("# ім'я"). Val () на $ (це) .parents ("форма"). Name.val ()? Або є кращий шлях для цього?

Дякую!

Відповіді:


190

Ви можете обрати таку форму:

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

Ви також можете вибрати для всіх дітей, які вводять дані: $ (this) .children (). Filter ("input")
Пім Джагер

або $ ("введення, текстова область, вибір", форма)
Еран Гальперін

1
Чому ви не можете використовувати var form = $(this).formяк у звичайному Javascript: function onClick(button) { var form = button.form; } ???
Хлоя

65

Цю відповідь я знайшов під час пошуку способу пошуку форми вхідного елемента. Я хотів додати примітку, оскільки зараз є кращий спосіб, ніж використання:

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

Я не впевнений, коли він був доданий до jQuery, але найближчий () метод робить саме те, що потрібно більш чисто, ніж використання батьків (). За допомогою найближчого коду можна змінити це:

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

Він проходить вгору і знаходить перший елемент, який відповідає тому, що ви шукаєте, і зупиняється на ньому, тому не потрібно вказувати: спочатку.


47

Щоб отримати форму, що подається, всередині, чому не просто

this.form

Найпростіший і швидкий шлях до результату.


3
чому потреба в обгортці jquery!
переосмислити

3
Тому що це було задано і як питання jQuery. І оскільки прийнята відповідь також повертає об’єкт jQuery, я хоч і був би непоганим. Все "навіщо це робити з jQuery, коли ви можете зробити це без того ж" убік.
грип

4

я використав наступний метод, і він добре працював для мене

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

$('#mybutton').closest("form") зробив трюк для мене.


3

Ейлін: Ні, це не так 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();
  ....
  });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.