jquery/js -- Comment sélectionner le formulaire parent en fonction du bouton d'envoi sur lequel on a cliqué ?

Question

J'ai une page Web contenant trois formulaires. Pas imbriqués, juste l'un après l'autre (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.

Donc, comment, lorsqu'un utilisateur clique sur le bouton submit du formulaire#1, faire en sorte que mon js script ne traite que les champs du formulaire1 ? Je suppose que cela a quelque chose à voir avec $(this).parents , mais je ne suis pas sûr de ce qu'il faut faire avec.

Ma validation script (que j'ai utilisée ailleurs, avec un seul formulaire) ressemble à quelque chose comme ça :

$(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 éléments comme $("#name").val() par $(this).parents('form').name.val() ? Ou existe-t-il une meilleure façon de procéder ?

Merci !

Answer 1

Vous pouvez sélectionner le formulaire comme ceci :

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

Toutefois, il est généralement préférable d'attacher l'événement à l'événement submit du formulaire lui-même, car il se déclenchera même en cas de soumission par pression de 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 à l'intérieur du formulaire, utilisez le contexte du formulaire. Par exemple :

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

Answer 2

J'ai trouvé cette réponse en cherchant comment trouver le formulaire d'un élément de saisie. Je voulais ajouter une note parce qu'il y a maintenant un meilleur moyen que d'utiliser :

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

Je ne suis pas sûr de la date à laquelle elle a été ajoutée à jQuery mais la méthode closest() fait exactement ce dont on a besoin de manière plus propre qu'en utilisant parents(). Avec closest, le code peut être modifié comme suit :

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

Il parcourt les éléments 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.

Answer 3

Pour obtenir le formulaire dans lequel se trouve le submit, pourquoi ne pas simplement

this.form

Le chemin le plus facile et le plus rapide vers le résultat.

Answer 4

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.

Answer 5

Eileen : non, ce n'est pas "var nameVal = form.inputname.val() ;" ça devrait être soit...

dans Jquery :

//on peut utiliser des identifiants (plus facile)

var nameVal =  $(form).find('#id').val();

/ou utiliser le champ [name=Fieldname] pour rechercher le champ.

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 en boucle toutes les entrées du formulaire :

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