Come faccio a selezionare il modulo principale in base al pulsante di invio selezionato?

Ho una pagina web con 3 moduli su di essa. Non nidificati, solo uno dopo l'altro (sono quasi identici, solo una variabile nascosta che è diversa). Un utente compilerà un solo modulo e vorrei convalidare / etc tutti i moduli con un solo script JS.

Quindi, quando un utente fa clic sul pulsante di invio del modulo n. 1, faccio in modo che il mio script js gestisca solo i campi nel modulo 1? Ho capito che ha qualcosa a che fare con $ (questo) .parents, ma non sono sicuro di cosa farne.

Il mio script di validazione (che ho usato altrove, con un solo modulo) è simile al seguente:

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

Quindi devo sostituire cose come $ ("# name"). Val () con $ (this) .parents ('form'). Name.val ()? O c'è un modo migliore per farlo?

Grazie!

Puoi selezionare il modulo in questo modo:

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

Tuttavia, in genere è meglio associare l'evento all'evento di invio del modulo stesso, poiché si innescherà anche durante l'invio premendo il tasto Invio da uno dei campi:

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

Per selezionare i campi all'interno del modulo, utilizzare il contesto del modulo. Per esempio:

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

Ho trovato questa risposta durante la ricerca di come trovare la forma di un elemento di input. Volevo aggiungere una nota perché ora c'è un modo migliore rispetto all'utilizzo:

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

Non sono sicuro quando è stato aggiunto a jQuery ma il metodo più vicino () fa esattamente ciò che è necessario in modo più pulito rispetto all'utilizzo dei genitori (). Con il più vicino il codice può essere modificato in questo:

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

Attraversa e trova il primo elemento che corrisponde a quello che stai cercando e si ferma lì, quindi non è necessario specificare: primo.

Per ottenere il modulo che contiene l'invio, perché non solo

this.form

Il percorso più semplice e rapido per il risultato.

ho usato il seguente metodo e ha funzionato bene per me

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

$('#mybutton').closest("form") ha fatto il trucco per me.

Eileen: No, non lo è var nameVal = form.inputname.val();. Dovrebbe essere ...

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

O in JavaScript:

var nameVal = this.form.FieldName.value;

O una combinazione:

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

Con jQuery, puoi persino scorrere tutti gli input nel modulo:

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