web-dev-qa-db-fra.com

Comment sélectionner le formulaire parent sur lequel le bouton d'envoi est cliqué?

J'ai une page Web avec 3 formulaires dessus. Non 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.

Alors, comment, lorsqu'un utilisateur clique sur le bouton d'envoi du formulaire n ° 1, est-ce que mon script js ne traite que des champs de formulaire1? Je suppose que cela a quelque chose à voir avec les $ (ceci) .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}

Donc dois-je remplacer des choses comme $ ("# nom"). Val () par $ (this) .parents ('formulaire'). Nom.val ()? Ou y a-t-il une meilleure façon de s'y prendre?

Merci!

jqueryforms
119
Eileen

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 lier l'événement à l'événement submit 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();
179
Eran Galperin

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 existe maintenant un meilleur moyen que d'utiliser:

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

Je ne sais pas quand elle a été ajoutée à jQuery, mais la méthode la plus proche () définit exactement ce qui est nécessaire plus proprement que d'utiliser parents (). Avec le plus proche le code peut être changé à ceci:

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: d’abord.

62
TC0072

Pour obtenir le formulaire qui contient la soumission, pourquoi ne pas simplement

this.form

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

45
redsquare

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 le tour pour moi.

4
charles

Eileen: Non, ce n'est pas var nameVal = form.inputname.val();. Ce 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 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();
  ....
  });
3
Lathan