130 votes

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

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 !

201voto

Eran Galperin Points 49594

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

70voto

TC0072 Points 490

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.

49voto

redsquare Points 47518

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.

4voto

charles Points 91

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.

3voto

Lathan Points 646

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X