Discussion :

[defender19]

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 :

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

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 :

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

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";
 }
}

[SpaceFrog]

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

[Invité]

Bonjour,

Code :

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

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 javascript :

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

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 html :

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

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>

[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

@SpaceFrog, le exec marche pourtant bien pour le cas là... Je ne connais aps trop JavaScript alors, je sais pas...

[SpaceFrog]

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

test sert à comparer une chaine à un format

[Invité]

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 javascript :

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

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 html :

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

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"