web-dev-qa-db-fra.com

Comment parcourir tous les éléments d'un formulaire jQuery

Je me demandais simplement quel serait le meilleur moyen de parcourir en boucle tous les éléments enfants d'un formulaire? Mon formulaire contient des éléments d'entrée et des éléments de sélection.

Pour le moment j'ai:

success: function(data) {
                $.each(data.details, function(datakey, datavalue) {
                    $('#new_user_form > input').each(function(key, value) {
                        if($(this).attr('id') == datakey) {
                            $(this).val(datavalue);
                        }
                    });
                });
            }

Cela ne fait que parcourir en boucle les éléments d'entrée du formulaire et je souhaite également inclure les éléments sélectionnés:

J'ai essayé:

$('#new_user_form > input, #new_user_form > select').each(function(key, value) {

mais ça ne marche pas. Est-ce que quelqu'un sait pourquoi cela se produirait? Merci!

jqueryloops
36
Jim

Depuis la page de sélecteur d’entrée jQuery : :

Etant donné que: input est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant: input ne peuvent pas tirer parti de l'amélioration des performances fournie par la méthode native querySelectorAll () du DOM. Pour obtenir les meilleures performances lors de l’utilisation de: input pour sélectionner des éléments, sélectionnez d’abord les éléments à l’aide d’un pur sélecteur CSS, puis utilisez .filter (": input").

C'est le meilleur choix.

$('#new_user_form *').filter(':input').each(function(){
    //your code here
});
69
Ohgodwhy

javaScript pur n'est pas si difficile:

for(var i=0; i < form.elements.length; i++){
    var e = form.elements[i];
    console.log(e.name+"="+e.value);
}

Remarque: car form.elements est un objet pour la boucle in-ne fonctionne pas comme prévu.

Réponse trouvée ici (par Chris Pietschmann) , documenté ici (W3S) .

21
user669677
$('#new_user_form').find('input').each(function(){
   //your code here
});
12
Adarsh Raj

Extrait du canal #jquery Freenode IRC:

$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });

Merci à @Cork sur le canal.

7
Sai Krishna

J'utilise:

$($('form').prop('elements')).each(function(){
    console.info(this)
});

Cela semble moche, mais pour moi, c'est toujours le meilleur moyen d'obtenir tous les éléments avec jQuery.

4
romuleald

Qu'est-ce qui se passe, si vous faites de cette façon: -

$('#new_user_form input, #new_user_form select').each(function(key, value) {

Référez-vous LIVE DEMO

3
Siva Charan

J'ai trouvé cet extrait de code jQuery simple, très pratique pour choisir le type de sélecteurs avec lequel je souhaite travailler:

$("select, input").each(function(){
     // do some stuff with the element
});
2
Phil

$('#new_user_form :input') devrait être votre voie à suivre. Notez l'omission du sélecteur >. Un formulaire HTML valide ne permettrait pas à une balise d'entrée d'être l'enfant direct d'une balise de formulaire.

1
scoota269

Effectuez l’un des deux sérialiseurs jQuery de votre formulaire à soumettre pour obtenir toutes les entrées ayant une valeur soumise.

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serializeArray();

var formData = JSON.stringify(criteria);

serializeArray () produira un tableau de noms et de valeurs

0: {name: "OwnLast", valeur: "Bird"}
1: {nom: "OwnFirst", valeur: "Bob"}
2: {name: "OutBldg []", valeur: "PDG"}
3: {name: "OutBldg []", valeur: "PDA"}

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serialize();

serialize () crée une chaîne de texte en notation standard codée par URL

"OwnLast = Bird & OwnFirst = Bob & OutBldg% 5B% 5D = PDG & OutBldg% 5B% 5D = PDA"

0
Greg Bologna