Afficher/cacher zone de texte selon choix

Version imprimable

Bonjour!

j'ai le problème classique, j'ai une liste déroulante avec un choix autre. Quand celui-ci est sélectionné je veux qu'une zone de texte
apparaisse. cela marche bien seulement quand j'ai sélectionné une fois autre et que la zone de texte est affichée, si je clique sur un autre choix,
la zone de texte ne s'efface pas!

Si vous voulez bien m'aider, merci :)

Voici mon code ;
Code:

1 2 3 4 5 6 7 8 9 <tr> <td><label for="q6">6- Raison : </label></td> <td><select name="q6" id="q6" onchange="selectChange(this)"> <option value="1_choix1">1) choix1</option> <option value="2_choix2">2) choix2</option> <option value="q6_autre">3) Autre</option> </select></td> <td id="q6_autre" style="display: none;"> Précisez : <input type="text" name="q6_autre" /></td> </tr>
et ma fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function selectChange(selected){ var val = selected.options[selected.selectedIndex].value; var reg = /^q\d+_autre$/; if (reg.exec(val)){ alert("ok"); document.getElementById(val).style.display = "block"; // j'ai testé avec "" et "block" } else{ alert("non"); document.getElementById(val).style.display = "none"; } }

10/05/2012, 10h42
SpaceFrog

ce n'est pas un exec qu'il faut faire avec la reg, mais un test

Bonjour,

Code:

1
2
3
4
else{
	alert("non");
	document.getElementById(val).style.display = "none";
 }

Dans le cas où on clique sur choix1 ou choix2 : val n'est PAS égale à q6_autre !
Donc : normal que l'input ne s'affiche pas.

Voici une modif. très simple :

Code:

1
2
3
4
5
6
7
8
9
10
function selectChange(valselect,valautre){
 var val = valselect.options[valselect.selectedIndex].value;
 if (val==valautre){
//	alert("ok");
	document.getElementById(valautre).style.display = "block"; // j'ai testé avec "" et "block"
 } else {
//	alert("non");
	document.getElementById(valautre).style.display = "none";
 }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<tr>
	<td><label for="q6">6- Raison  : </label></td>
	<td>
		<select name="q6" id="q6" onchange="selectChange(this,'q6_autre');">
			<option value="1_choix1">1) choix1</option>
			<option value="2_choix2">2) choix2</option>
			<option value="q6_autre">3) Autre</option>
		</select>
	</td>
	<td>
		<span id="q6_autre" style="display: none;"> Précisez : <input type="text" name="q6_autre" /></span>
	</td>
</tr>
</table>

10/05/2012, 14h13
defender19

Et ben merci bien jreaux62 !

Je n'avais même pas pensé à passer en paramètre la bonne solution pour le test, ça marche impeccable!

Merci bien :) :D

@SpaceFrog, le exec marche pourtant bien pour le cas là... Je ne connais aps trop JavaScript alors, je sais pas...
10/05/2012, 14h32
SpaceFrog

exec sert a recupérer differents éléments d'une chaine

test sert à comparer une chaine à un format

Un dernier détail IMPORTANT (que tu aurais vu à la récupération du formulaire) :
le fait de masquer l'input NE le vide PAS ! (une valeur entrée restera dans l'input, même s'il est masqué).

LA SOLUTION : on vide l'input

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function selectChange(valselect,valautre){
 var val = valselect.options[valselect.selectedIndex].value;
 if (val==valautre){
	document.getElementById('box'+valautre).style.display = "block";
 } else {
	document.getElementById('box'+valautre).style.display = "none";
	document.getElementById('txt'+valautre).value = ""; // on vide l'input
 }
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
	<td><label for="q6">6- Raison  : </label></td>
	<td><select name="q6" id="q6" onchange="selectChange(this,'q6_autre')">
			<option value="1_choix1">1) choix1</option>
			<option value="2_choix2">2) choix2</option>
			<option value="q6_autre">3) Autre</option>
		</select>
	</td>
	<td>
		<span id="boxq6_autre" style="display: none;"> Précisez : <input id="txtq6_autre" type="text" name="q6_autre" value="" /></span>
	</td>
</tr>
</table>

Pour plus de clarté, j'ai changé les id en "boxq6_autre" et "txtq6_autre"