11548 sujets

JavaScript, DOM et API Web HTML5

Champs cachés formulaire

Bonjour,

Je souhaite cacher deux champs d'un formulaire et les faire apparaitre lorsqu'une option est séléctionnée. N'y connaissant RIEN en javascript j'ai trouvé un code sur internet qui permet de réaliser cela.
J'ai réussi cacher un champ mais je n'arrive pas à masquer le second.

J'ai essayé d'insérer les lignes:

document.getElementById("timepicker").style.display = "none";
document.getElementById("timepicker").style.display = "inline";
document.getElementById("timepicker").style.display = "none";

sous chaque ligne correspondant au "datepicker" mais ça ne fonctionne pas.

Voiçi ce que j'ai pour l'instant: 

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
</head>
<body>



	
        <p>
		<label for="trajet">Type de trajet</label>
		 <select name="objet" size="1" id="objet">
    		      <option value="aller">Aller-simple</option>
   		       <option value="retour">Aller-retour</option>
		</select>
	</p>
	
	<p>
		<label for="date aller">Date allée</label>
		<input type="text" id="allee" class="datepicker" name="date-allee"/>
	</p>
									
	<p>
		<label for="horaire aller">Horaire allée</label>
		<input type="text" id="timepicker" class="timepicker" name="heure-allee"/>
	</p>
									
	<p>
		<label for="date retour" id="inputFileLabel">Retour</label>
		<input name="datepicker" id="datepicker" class="datepicker" type="text" size="40"/>
	</p>
									
	<p>
		<label for="horaire retour" id="inputFileLabel">Horaire retour</label>
		<input name="timepicker" id="timepicker" class="timepicker" type="text" size="40"/>
	</p>
									


<script type="text/javascript">
	function rendSelectSensible() {
   	 document.getElementById("objet").onchange = afficheCacheInput;
   	 document.getElementById("datepicker").style.display = "none";
   	 document.getElementById("inputFileLabel").style.display = "none";
	}
	function afficheCacheInput() {
    	if ( document.getElementById("objet").value == "retour" ) {
     	   document.getElementById("datepicker").style.display = "inline";
		document.getElementById("inputFileLabel").style.display = "inline";
   	 } else {
     	   document.getElementById("datepicker").style.display = "none";
		document.getElementById("inputFileLabel").style.display = "none";
  	  }
	}
	window.onload = rendSelectSensible;
</script>


</body>
</html>



Merci pour le coup de main.
Sujet clos
Aller à