afficher/cacher un input text

Version imprimable

Bonjour tout le monde,

J'ai une liste permettant de choisir plusieurs mots clés parmis une liste déroulante. A la fin de cette liste, j'ai une option autre. J'aimerais que lorsque je clic sur cette option, une zone de texte apparaisse et que l'utilisateur puisse entrer ce qu'il veut.

Inversement, j'aimerais qu'elle soit cachée lorsque l'option n'est pas cochée.

Voila un bout de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 <select name="motsCles" id="motsCles" multiple="multiple" style="height:<?php echo 20*$nb_motsCles; ?>px;" onChange="verifAutre()"> <?php for($i=1;$i<=$nb_motsCles;$i++){ ?> <option value="<?php echo $i; ?>"><?php echo $GLOBALS["tableau_motsClesEntreprise"][$i]; ?></option> <?php } ?> <option value="0">Autre</option> </select> <input type="text" name="autreMotCle" id="autreMotCle" style="visibility:hidden">
Si quelqu'un a une solution ou une piste, je l'en remercie d'avance.

Tu peux donner par exemple une valeur particulier (pour faciliter les test) à l'option qui va afficher la zone

Code:

1
2
3
4
5
6
 
<Select onchange="test(this)"> 
  <!-- les autre selects-->
  <option value="lavaleur">xxxx</option>
</select>
<input type="text" name="mazone" id="mazone" style="display: none;">

le js

Code:

1
2
3
4
5
6
7
8
9
 
function test(objSelectSrc) {
 // ex test sur la valeur
 if(objSelectSrc.options[objSelectSrc.selectedIndex].value =="lavaleur") {
   document.getElementById("mazone").display = "block";
 } else  {
   document.getElementById("mazone").display = "none";
 }
}

Le même code, mais si tu veux comment a ton idée 1ere tester lorsque l'element selectionné est le dernier

Code:

1
2
3
4
5
6
7
8
9
 
function test(objSelectSrc) {
 // ex test si dernier element selectionné
 if(objSelectSrc.selectedIndex == (objSelectSrc.options.length-1) ) {
   document.getElementById("mazone").display = "block";
 } else  {
   document.getElementById("mazone").display = "none";
 }
}

Merci !
J'ai réussi avec une solution similaire.
Par contre, un nouveau pb se pose. Voila mon nouveau code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	function verifAutre(){
		var nb_mc = document.getElementById('motsCles').length;
		for($i=0; $i<nb_mc; $i++) {
			if (document.getElementById('motsCles')) {
 
			}
		}
		if(document.getElementById('motsCles').value=='value0'){
			document.getElementById('autreMotCle').style.visibility="visible";
		} else {
			if (document.getElementById('autreMotCle').value == "") {
				document.getElementById('autreMotCle').style.visibility="hidden";
			} else {
				document.getElementById('autreMotCle').style.visibility="visible";
			}
		}
	}

Code:

1
2
3
4
5
6
7
8
9
10
11
<select name="motsCles" id="motsCles" multiple="multiple" style="height:<?php echo 20*$nb_motsCles; ?>px;" onChange="verifAutre()">
              <?php
                        for($i=1;$i<=$nb_motsCles;$i++){
?>
              <option value="value<?php echo $i; ?>"><?php echo $GLOBALS["tableau_motsClesEntreprise"][$i]; ?></option>
              <?php
                        }
?>
              <option value="value0">Autre</option>
            </select>
			<input type="text" name="autreMotCle" id="autreMotCle" style="visibility:hidden">

Maintenant, lorsque je clic sur l'option autre, la zone de texte s'affiche, et disparait si l'option est décochée et que rien n'a été entrée dedans.

Maintenant, le pb est que lorsque la zone de saisie est vide, et que l'option autre est sélectionner en mm temps qu'une autre option, le champ disparait. Hors il devrait rester.

Merci d'avance de vos suggestions.

A+

C'est bon j'ai trouvé !
voila le code de ma fonction si ca peut intéresser quelqu'un :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	function verifAutre(){
		var selectBox = document.formulaire.motsCles;
		var autreSelectionne = false;
		for (var i=0; i<selectBox.options.length; i++) {
			if (selectBox.options[i].selected) {
				if(selectBox.options[i].value=="value0"){
					autreSelectionne = true;
				}
			}
		}
		//alert(autreSelectionne);
 
		if(autreSelectionne==true){
			document.getElementById('autreMotCle').style.visibility="visible";
		} else {
			if (document.getElementById('autreMotCle').value == "") {
				document.getElementById('autreMotCle').style.visibility="hidden";
			} else {
				document.getElementById('autreMotCle').style.visibility="visible";
			}
		}
	}

A+