Comment obtenir des champs de formulaire d'un fieldset spécifique?

Question

J'écris un formulaire HTML qui est divisé en fieldsets, et j'ai besoin d'obtenir les champs de formulaire d'un fiedset spécifique dans une fonction.
Actuellement, il est comme ceci:

function conta(Fieldset){ 
    var Inputs = Fieldset.getElementsByTagName("input"); 
    var Selects = Fieldset.getElementsByTagName("select"); 
    /* Doing the stuff I need to do in two iterations, one for each field type */ 
} 

Mais qui sait ce que l'avenir peut tenir, et si la forme obtient de nouveaux types de champs (radios, cases à cocher), cela pourrait devenir terrible à mantenir.
Je sais que form éléments ont l'attribut elements qui renvoie tous les champs de formulaire et j'espérais pouvoir utiliser quelque chose comme ça.
(je sais que je dois encore distinguer le type de champ dans un tas de conditionals à l'intérieur de l'itération, mais je pense que ce serait plus rapide et plus facile à maintenir. À moins qu'il ne l'est pas et je ne devrais pas faire)

Answer 1

Je n'ai pas testé cela et ne savent pas comment cela fonctionnerait, mais vous pouvez utiliser JQuery ici pour sélectionner tous les éléments dans un objet JQuery

//$("input select textarea").each(function() { 
$(":input").each(function() { //even better 
    // do stuff here 
}); 

ce serait au moins de nettoyer le code, bien que vous auriez encore ajouter des instructions conditionnelles basées sur le type de champ comme vous l'avez mentionné.

Answer 2

@Ryan est sur la bonne voie si vous voulez utiliser jQuery (et je), mais je vous suggère quelque chose de plus le long des lignes de:

$('fieldset#fieldset1 > input[type=text]').each(function() { 
     ... do something for text inputs } 
); 

$('fieldset#fieldset1 > input[type=radio]').each(function() { 
     ... do something for radios } 
); 

$('fieldset#fieldset1 > select').each(function() { 
     ... do something for selects } 
); 

$('fieldset#fieldset1 > textarea').each(function() { 
     ... do something for textareas } 
); 

Comme une amélioration par rapport si-then- d'autre construit.

Answer 3

Les boutons radio et les cases à cocher sont toujours des étiquettes d'entrée et seront dans les entrées var. Le problème est, vous aurez besoin d'ajouter des gestionnaires pour l'état vérifié pour voir quels boutons radio et cases à cocher sont sélectionnés.

Encore pire, vous pouvez avoir plus d'un bouton radio et une case à cocher avec le même nom ... en fait, vous devez le faire pour les boutons radio ou ils ne fonctionnent pas comme prévu.

Answer 4

Pas jQuery, pas de problème:

function condat(fieldset) { 
    var tagNames = ['input', 'select', 'textarea']; // Insert other tag names here 
    var elements = []; 

    for (var i in tagNames) 
     elements.concat(fieldset.getElementsByTagName(tagNames[i]); 

    for (var i in elements) { 
     // Do what you want 
    } 
} 

Answer 5

Filip solution Dupanović avec le second commentaire de Cargowire a fonctionné pour moi, mais seulement avec une modification mineure. Le second commentaire de Cargowire n'a produit qu'un tableau qui ne contient que les caractères découpés en tranches du tableau tagNames (je l'aurais écrit dans un commentaire, mais je n'ai pas le rep pour le moment).

Voici ce qui a fonctionné:

function condat(fieldset) { 
    var tagNames = ['input', 'select', 'textarea']; // Insert other tag names here 
    var elements = []; 

    for (var i in tagNames) { 
     elements = elements.concat([].slice.call(fieldset.getElementsByTagName(tagNames[i]))); 
    } 
    for (var i in elements) { 
     // Do what you want. 
     // Attributes of the selected tag's can be referenced for example as 
     // elements[i].value = ...; 
    } 
} 

Une application très pratique, ce serait de définir les boutons qui ne réinitialiser un fieldset au lieu de toute la forme. Utilisez simplement elements[i].value = elements[i].defaultValue; dans la partie //do what you want pour que les entrées de texte soient réinitialisées. Et bien sûr, lier la fonction condat à l'événement onclick du bouton fournissant l'élément fieldset dom en tant que paramètre.

Answer 6

Vous devez utiliser simplement querySelectorAll:

function condat(fieldset) { 
    var elements = fieldset.querySelectorAll('input, select, textarea'); 
    elements.forEach(function(element){ 
    // Do what you want with every element 
    }); 
}