[DOM] Liste des ID incomplète

Bonjour à tous,

Je suis tout nouveau dans ce monde de développement, je viens de découvrir le java, spring, oracle, javascript. Beaucoup de chose quoi (en 9 mois, pas de dév avant...)

J'ai un petit soucis de javascript.

Je dois récupérer tous les id d'un form et j'utilise pour cela :

Code:

---

1 2 3 4

var spans = document.forms[0].elements; for (iT = 0; iT < spans.length; iT++) { alert("id = " + spans[iT].id + "et "+ spans[iT].path); }

---

Je récupère bien les select, les inputs, radio button mais par contre je n'ai pas les labels et les spans.

Savez vous pourquoi????
Merci de votre aide.

Bonjour et bienvenue dans le forum JavaScript ;)

Citation:

---

Envoyé par gemine

Je récupère bien les select, les inputs, radio button mais par contre je n'ai pas les labels et les spans.

Savez vous pourquoi????

---

Parce que les label et span ne sont pas des éléments du formulaire (au sens où ils ne sont pas pris en compte dans la collection "document.forms[].elements").

A+

parceque elements est la collection des champs de formulaire et un spn n'est pas un champs

essaye avec childNodes ou getElementsByTagName('*')
à la place

dans ce cas le mieux est de faire :

Code:

---

1 2 3

var formulaire = document.getElementById("idForm"); var tabElements = formulaire.getElementsByTagName("*");

---

Il faut que la balise form ait l'attribut id renseigné (ici sa valeur est idForm)

Code:

---

<form id="idForm" action="">

---

ensuite grâce à getElementsByTagName("*") on récupère tous les éléments contenus dans le formulaire (la fonction retourne un tableau).

Merci pour vos réponses super rapide.

Effectivement comme cela je récupère tout (même un peu trop, mais je vais y faire du tris).

Encore merci.

Citation:

---

Envoyé par gemine

(même un peu trop, mais je vais y faire du tris)

---

Attention lors de ton tri : le "un peu trop" ne sera pas le même suivant le navigateur.

Voir la FAQ sur ce sujet ;)

A+

Merci, j'ai bien avancé sur le sujet.

Je suis confronté à un autre problème.

Ma fonction scanne tous les éléments d'un form et traite les saisies de l'utilisateur.
Mon soucis c'est qu'en fonction de ses saisies, il y a des choses comme :

Code:

---

1 2	<span id="aNePasTraite" style="display: none;">

---

avec des div en dessous.

Vu que ce n'est pas affiché, j'ai des erreurs car je ne dois pas les traités.

Y a t il moyen de trouver le span fermant correspondant (comme faire un saut dans ma boucle) qui est :

Code:

---

1 2 3 4 5 6 7

var formulaire = document.getElementById(nomDuFORM); var tabElements = formulaire.getElementsByTagName("*");   for (var i = 0; i < tabElements.length; i++) { elementEnTest = tabElements[i]; ...

---

Merci à vous

Je ne vois pas en quoi les textes (statiques) de ton formulaire te sont utiles.

Filtre plutôt les éléments du formulaire car ce sont eux qui possèdent les informations :
- lis le contenu des input de type text, file, checkbox, radio et ignore les input de type button, image, reset, submit (je ne dois pas en avoir oublié) ;
- lis le contenu des textarea

Bah en fait tout est utile, je m'explique

Je dois faire en sorte de vérifier la saisie d'un utilisateur sur une page comme nom prénom, là pas de problème, si la saisie n'est pas correct en fait "nom" qui se trouve devant passe en rouge (d'ou l'utilité des labels).

La ou c'est plus compliqué c'est par exemple sur le nombre d'enfants.
Il y a un select de 0 à x.
S'il laisse une valeur inférieur à x il y a des div cachés non renseignés.

Mon script fonctionne pour quelqu'un qui aurait le maximum d'enfant sur la page car en fait lorsque l'on clique pour aller sur la page suivante, mon script vérifie tous les champs et s'il y en a qui sont vide (Et là il y a ceux qui sont caché), bah ça plante on ne peut jamais allé à la page suivante.

D'ou mon intéret de pouvoir trouver la fin d'un div et de sauter directement à celui-ci dans ma boucle.

Merci.

Citation:

---

Envoyé par gemine

D'ou mon intéret de pouvoir trouver la fin d'un div et de sauter directement à celui-ci dans ma boucle.

---

Salut,

document.getElementsByTagName('*') va te retourner une liste "à plat" de
tes éléments et tu perds la notion d'imbrication de ceux-ci. Tu pourrais t'en
sortir en testant si l'élément que tu traite appartient à un div caché en remontant
l'arborescence avec parentNode

Sinon tu pourrais faire une fonction récursive qui parcours ton DOM avec
firstChild, nextSibling ou childNodes et décider de visiter les sous arbres à
certaines conditions.

Mais ces deux méthodes sont très liées à la présentation, j'entends par là
que tu base ta logique de test sur le fait que les éléments à ne pas valider
sont invisibles.

Une autre approche serait de lister les éléments à valider dans un tableau
javascript et d'utiliser une "nomenclature" pour les ids. Par exemple:

Code:

---

1 2	<label id='lab_01'><input type='text' id='txt_01'></label>

---

Ensuite quand tu veux valider les champs tu parcours la liste des "numéros"
et tu recompose les id pour cibler tes champs.

oulà un label comme ça ?

je préfère

Code:

---

<label id='lab_01' for="txt_01" >contenu label</label><input type='text' id='txt_01' />

---

Citation:

---

Envoyé par SpaceFrog

oulà un label comme ça ?

je préfère

Code:

---

<label id='lab_01' for="txt_01" >contenu label</label><input type='text' id='txt_01' />

---

---

Imbriquer le input dans le label permet d'éviter l'usage du for,
parfois intéressant, parfois pas :-)

Ca y es je m'en suis sorti, je test tout simplement les noeuds du dessus, si c'est caché je ne fais pas le traitement.

Merci à vous.