Jak wybrać formularz nadrzędny na podstawie kliknięcia przycisku przesyłania?

Mam stronę internetową z 3 formularzami. Nie zagnieżdżone, tylko jedna po drugiej (są prawie identyczne, tylko jedna ukryta zmienna jest inna). Użytkownik wypełni tylko jeden formularz i chciałbym / etc zweryfikować wszystkie formularze za pomocą tylko jednego skryptu JS.

Jak więc, gdy użytkownik kliknie przycisk przesyłania formularza nr 1, mam sprawić, by mój skrypt js obsługiwał tylko pola w formularzu form1? Rozumiem, że ma to coś wspólnego z rodzicami $ (this)., Ale nie jestem pewien, co z tym zrobić.

Mój skrypt walidacyjny (którego użyłem gdzie indziej, tylko z jednym formularzem) wygląda mniej więcej tak:

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

Czy muszę więc zamienić takie rzeczy, jak $ ("# nazwa"). Val () na $ (this) .parents ('form'). Name.val ()? A może jest lepszy sposób na zrobienie tego?

Dzięki!

Możesz wybrać taki formularz:

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

Jednak generalnie lepiej jest dołączyć zdarzenie do zdarzenia przesyłania samego formularza, ponieważ będzie ono wywoływane nawet po przesłaniu przez naciśnięcie klawisza enter w jednym z pól:

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

Aby wybrać pola w formularzu, użyj kontekstu formularza. Na przykład:

$("input[name='somename']",form).val();

Tę odpowiedź znalazłem, szukając sposobu znalezienia formy elementu wejściowego. Chciałem dodać notatkę, ponieważ jest teraz lepszy sposób niż użycie:

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

Nie jestem pewien, kiedy został dodany do jQuery, ale metoda near () robi dokładnie to, co jest potrzebne, w bardziej przejrzysty sposób niż użycie parent (). Z najbliższym kod można zmienić na ten:

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

Przechodzi w górę i znajduje pierwszy element, który pasuje do tego, czego szukasz, i zatrzymuje się w tym miejscu, więc nie ma potrzeby określania: pierwszy.

Aby otrzymać formularz, który przesyłasz jest w środku, dlaczego nie tylko

this.form

Najłatwiejsza i najszybsza droga do wyniku.

Użyłem następującej metody i działało dobrze dla mnie

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

$('#mybutton').closest("form") załatwił sprawę dla mnie.

Eileen: Nie, nie jest var nameVal = form.inputname.val();. Powinien być albo ...

w 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();

Lub w JavaScript:

var nameVal = this.form.FieldName.value;

Lub kombinacja:

var nameVal = $(this.form.FieldName).val();

Dzięki jQuery możesz nawet przechodzić przez wszystkie wejścia w postaci:

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