Inserer un champ dépendant d'un autre

Ishantiberia -  
Alain_42 Messages postés 5413 Statut Membre -
Bonjour,

Je souhaiterais insérer un champ qui soit :
1- dépendant d'un premier choix situé dans un menu déroulant
2- masqué si celui-ci n'est pas applicable au champ sélectionné

Actuellement, je suis dans cette configuration :

<td>Service:</td>
<select name="Service">
<option name="Approvisionnement">Approvisionnement</option>
<option name="Autre">Autre :</option><input id="autre" name="autre" type="text" [MON PROBLEME !!!]
</select>
</td>

Je voudrais qu'un champ texte soit inséré après le "Autre:" afin que la personne précise son service, mais que ce champ ne soit pas visible si la personne choisit le champ "Approvisionnement" par exemple.

J'espère être compréhensible...

Auriez-vous une idée pour m'aider ?
A voir également:

1 réponse

Réponse 1 / 1
Alain_42 Messages postés 5413 Statut Membre 894
 
Salut,

déja pour option ce n'est pas comme ça:

<option name="Approvisionnement">Approvisionnement</option>

il faut: 

<option value="Approvisionnement">Approvisionnement</option>


ensuite tu ne peux pas mettre de champ input au milieu de balises <select

Pour ton pb tu peux faire par javascript: 

<script language="javascript">
function affiche_champ(){
var obj=document.getElementById('Service');
var choix=obj.value;
if(choix == "Apprivisionnement"){

var obj2=document.getElementById('champ_ajoute');
obj2.innerHTML="Complement: <input type="text" id="autre" name="autre" >";

}else{
var obj2=document.getElementById('champ_ajoute');
obj2.innerHTML="";
}

</script>

<td>Service:</td>
<select name="Service" id="Service" onChange=" affiche_champ();">
<option name="Approvisionnement">Approvisionnement</option>
<option name="Autre">Autre :</option>
</select>
</td> 

<div id="champ_ajoute"><!-- la serra ecrit le nouveau champ --></div>
0
Ishantiberia
 
Merci de votre réponse, cependant, étant plus que novice, j'ai quelques difficultés à mettre en application...
Où dois-je mettre mon java script ? J'ai testé dans le <head> et dans un fichier séparé, rien a faire : j'ai une ligne supplémentaire qui apparait en dessous de mon <select> avec le texte pour "champ_ajoute" mais ce texte reste quelque soit le choix fait auparavant...
0
Alain_42 Messages postés 5413 Statut Membre 894 > Ishantiberia
 
Salut,

j'avais qq erreurs dans mon code, fait un peu trop rapidement, voici qq chose de plus complet et qui fonctionne 

<html>
<head>
<script language="javascript">
function affiche_champ(){
	
	var obj=document.getElementById('Service');
	var choix=obj.value;
	if(choix == "Approvisionnement"){
		var obj2=document.getElementById('champ_ajoute');
		obj2.innerHTML="Complement: <input type=\"text\" id=\"autre\" name=\"autre\" >";
	}else{
		var obj2=document.getElementById('champ_ajoute');
		obj2.innerHTML="";
	}
}
</script>
</head>
<body>
<table>
	<tr>
		<td>Service:</td>
		<td>
			<select name="Service" id="Service" onChange=" affiche_champ();">
				<option value="0" selected>Choisissez</option>
				<option value="Approvisionnement">Approvisionnement</option>
				<option value="Autre">Autre :</option>
			</select>
		</td> 
	</tr>
</table>
<div id="champ_ajoute">
		<!-- la serra ecrit le nouveau champ -->
</div>
</body>
</html>
-1