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

124

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!

isherwood
quelle

Antworten:

190

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();
Eran Galperin
quelle
Sie können auch alle eingegebenen untergeordneten Elemente auswählen: $ (this) .children (). Filter ("input")
Pim Jager
oder $ ("Eingabe, Textbereich, Auswahl", Formular)
Eran Galperin
1
Warum kannst du nicht var form = $(this).formwie in normalem Javascript verwenden: function onClick(button) { var form = button.form; } ???
Chloe
65

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.

TC0072
quelle
47

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

this.form

Einfachster und schnellster Weg zum Ergebnis.

rotes Quadrat
quelle
3
warum die Notwendigkeit für den JQuery Wrapper!
Redsquare
3
Weil dies auch als jQuery-Frage gestellt wurde. Und da die akzeptierte Antwort auch ein jQuery-Objekt zurückgibt, dachte ich, dass es schön wäre. Alle "warum das mit jQuery machen, wenn Sie es auf die gleiche Weise ohne machen können" beiseite.
Grippe
4

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.

Charles
quelle
3

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