Discussion :

[Flackou]

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!

[Mr N.]

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

[Sh4dow49]

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

[Flackou]

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

[Flackou]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gui80]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>