Wie wähle ich das übergeordnete Formular basierend auf der Schaltfläche zum Senden aus?

Ich habe eine Webseite mit 3 Formularen. Nicht verschachtelt, nur eine nach der anderen (sie sind fast identisch, nur eine versteckte Variable, die anders ist). Ein Benutzer füllt nur ein Formular aus und ich möchte / etc alle Formulare mit nur einem JS-Skript validieren.

Wie kann ich also, wenn ein Benutzer auf die Schaltfläche "Senden" von Formular 1 klickt, dafür sorgen, dass mein js-Skript nur mit den Feldern in Formular 1 umgeht? Ich nehme an, es hat etwas mit $ (this) .parents zu tun, aber ich bin mir nicht sicher, was ich damit machen soll.

Mein Validierungsskript (das ich an anderer Stelle mit nur einem Formular verwendet habe) sieht ungefähr so ​​aus:

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

Muss ich also Dinge wie $ ("# name"). Val () durch $ (this) .parents ('form'). Name.val () ersetzen? Oder gibt es einen besseren Weg, dies zu tun?

Vielen Dank!

Sie können das Formular folgendermaßen auswählen:

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

Im Allgemeinen ist es jedoch besser, das Ereignis an das Übermittlungsereignis des Formulars selbst anzuhängen, da es auch beim Senden durch Drücken der Eingabetaste in einem der Felder ausgelöst wird:

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

Verwenden Sie den Formularkontext, um Felder im Formular auszuwählen. Beispielsweise:

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

Ich habe diese Antwort gefunden, als ich nach der Form eines Eingabeelements gesucht habe. Ich wollte eine Notiz hinzufügen, weil es jetzt einen besseren Weg gibt als:

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

Ich bin nicht sicher, wann es zu jQuery hinzugefügt wurde, aber die next () -Methode macht genau das, was benötigt wird, sauberer als die Verwendung von parent (). Mit dem nächsten kann der Code wie folgt geändert werden:

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

Es wird durchlaufen und findet das erste Element, das dem entspricht, wonach Sie suchen, und stoppt dort, sodass Sie nicht angeben müssen: zuerst.

Um das Formular zu erhalten, in dem sich die Übermittlung befindet, warum nicht einfach

this.form

Einfachster und schnellster Weg zum Ergebnis.

Ich habe die folgende Methode verwendet und es hat gut für mich funktioniert

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

$('#mybutton').closest("form") hat den Trick für mich gemacht.

Eileen: Nein, das ist es nicht var nameVal = form.inputname.val();. Es sollte entweder ...

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

Oder in JavaScript:

var nameVal = this.form.FieldName.value;

Oder eine Kombination:

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

Mit jQuery können Sie sogar alle Eingaben im Formular durchlaufen:

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