[DOM] Formulaire dynamique : affichage conditionnel de champs

Bonjour,

J'ai un formulaire que je dois rendre dynamique : par exemple, une certaine valeur dans une liste déroulante doit faire apparaître de nouveaux champs, ou bien la réponse à une liste déroulante 1 change les valeurs possibles pour une liste déroulante 2.

Quelle est la meilleure façon de faire cela? Je peux m'en sortir avec du javascript seul ou je dois utiliser de l'ajax?

Merci d'avance pour votre aide!

Va voir dans la faq !
http://javascript.developpez.com/faq...js#listesLiees

et encore plus dynamique (avec très peu d'ajax, même moi qui n'y connaissait rien en ajax/javascript j'ai réussi rapidement à le mettre en place à ma sauce) : http://siddh.developpez.com/articles/ajax/#LIV-A

Merci pour le lien vers la FAQ, je cherchais justement un tuto du style.

En fait j'ai pas tout à fait trouvé ce que je cherchais.
Mon formulaire est sous la forme d'un tableau. J'ai une question "Avez-vous une voiture?" qui selon la réponse, affiche ou non 4 questions supplémentaires ("quel modèle?", "quel marque?"...).

Je pourrais mettre un simple onChange sur ma combobox, mais j'ai un problème avec ca à l'initialisation du formulaire. En effet, dans le cas d'une modification (et non d'une nouvelle saisie) mes champs sont initialisés automatiquement à la valeur enregistrée, mais même si la réponse à la question "Avez-vous une voiture?" est "non", les questions supplémentaires sont tout de même affichées. Je voudrais qu'à l'initialisation, les questions soient masquées ou affichées selon le oui/non (et donc même s'il n'y a pas eu d'évenement onChange). Vous voyez ce que je veux dire?

De plus, les questions supplémentaires occupent chacune une ligne du tableau. Je voudrais les mettre dans un bloc commun pour le faire apparaitre/disparaître selon la réponse au oui/non. J'ai essayé un :

Code:

---

1 2 3 4 5 6 7 8 9

<table> <tr><td>Avez-vous une voiture?</td><td>...</td></tr> <div id= "mes_questions_supplementaires"> <tr><td>Quel modèle?</td><td>...</td></tr> <tr><td>Quelle couleur?</td><td>...</td></tr> <tr>...</tr> </div> </table>

---

et dans mon JS, je faisais un Element.hide('mes_questions_supplementaires');, mais ca ne marchait pas donc visiblement on ne peut pas procéder comme ca. Vous avez une idée pour ce 2ème pb?

Merci

Bonsoir,

je vois que tu parles de Element.hide, donc je suppose que tu utilises le framework prototype. Donc voici un bout de code pour ajouter via DOM des lignes tr dans un tableau.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

function creer_dans_tableau() { var my_tr,my_td;   my_tr=document.createElement('tr'); Element.writeAttribute(my_tr,'id','marque'); Element.insert('voiture',{after: my_tr });// insertion dans le body   my_td=document.createElement('td'); Element.update(my_td,'Quelle marque ?'); my_tr.appendChild(my_td);   my_td=document.createElement('td'); Element.update(my_td,'...'); my_tr.appendChild(my_td); //2ème ligne rajoutée my_tr=document.createElement('tr'); Element.writeAttribute(my_tr,'id','modele'); Element.insert('voiture',{after: my_tr });// insertion dans le body   my_td=document.createElement('td'); Element.update(my_td,'Quelle modèle ?'); my_tr.appendChild(my_td);   my_td=document.createElement('td'); Element.update(my_td,'...'); my_tr.appendChild(my_td); }

---

dans le body :

Code:

---

1 2 3 4 5 6

<table id='bloc1'> <tr id='voiture'><td>Avez-vous une voiture?</td><td>...</td></tr> <tr><td>ligne1c1</td><td>ligne1c2</td></tr> <tr><td>ligne2c1</td><td>ligne2c2</td></tr> </table>

---