jquery / js – Comment sélectionner le formulaire parent sur lequel est cliqué le bouton d’envoi?

J’ai une page Web avec 3 formulaires. Pas nested, juste l’un après l’autre (ils sont presque identiques, juste une variable cachée 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 de soumission du formulaire n ° 1, est-ce 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 trop 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 existe-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 d’attacher l’événement à l’événement submit du formulaire lui-même, car il déclenchera même en soumettant 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 append une note car il y a maintenant une meilleure façon d’utiliser:

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

Je ne suis pas sûr quand il a été ajouté à jQuery mais la méthode la plus proche () fait exactement ce dont on a besoin plus proprement que l’utilisation de parents (). Avec le plus proche le code peut être changé pour ceci:

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

Il se déplace 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.

Pour obtenir la forme que la soumission est à l’intérieur pourquoi pas seulement

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

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

à Jquery:

// vous pouvez utiliser des identifiants (plus facile)

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

// ou utilisez [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 toutes les entrées de 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(); .... });