Comment sélectionner le formulaire parent en fonction du bouton d'envoi sur lequel on clique?

J'ai une page Web avec 3 formulaires dessus. Non imbriqués, juste les uns après les autres (ils sont presque identiques, juste une variable cachée qui est différente). Un utilisateur ne remplira qu'un seul formulaire, et j'aimerais valider / etc tous les formulaires avec un seul script JS.

Alors, comment, lorsqu'un utilisateur clique sur le bouton Soumettre du formulaire n ° 1, dois-je faire en sorte que mon script js ne traite que les champs de form1? Je suppose que cela a quelque chose à voir avec $ (this) .parents, mais je ne sais pas quoi en faire.

Mon script de validation (que j'ai utilisé ailleurs, avec un seul formulaire) ressemble à ceci:

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

Dois-je donc remplacer des choses comme $ ("# name"). Val () par $ (this) .parents ('form'). Name.val ()? Ou y a-t-il une meilleure façon de procéder?

Merci!

Vous pouvez sélectionner le formulaire comme ceci:

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

Cependant, il est généralement préférable de joindre l'événement à l'événement de soumission du formulaire lui-même, car il se déclenchera même lors de la soumission en appuyant sur la touche Entrée de l'un des champs:

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

Pour sélectionner des champs dans le formulaire, utilisez le contexte du formulaire. Par exemple:

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

J'ai trouvé cette réponse en cherchant comment trouver la forme d'un élément d'entrée. Je voulais ajouter une note car il y a maintenant un meilleur moyen que d'utiliser:

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

Je ne sais pas quand il a été ajouté à jQuery mais la méthode la plus proche () fait exactement ce qui est nécessaire plus proprement que l'utilisation de parents (). Avec le plus proche, le code peut être modifié comme suit:

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

Il parcourt et trouve le premier élément qui correspond à ce que vous recherchez et s'arrête là, il n'est donc pas nécessaire de spécifier: first.

Pour obtenir le formulaire dans lequel se trouve la soumission, pourquoi pas simplement

this.form

Chemin le plus simple et le plus rapide vers le résultat.

J'ai utilisé la méthode suivante et cela a bien fonctionné pour moi

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

$('#mybutton').closest("form") a fait l'affaire pour moi.

Eileen: Non, ce n'est pas le cas var nameVal = form.inputname.val();. Cela devrait être soit ...

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

Ou en JavaScript:

var nameVal = this.form.FieldName.value;

Ou une combinaison:

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

Avec jQuery, vous pouvez même parcourir toutes les entrées sous la forme:

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