Adapter les champs d'un formulaire à l'aide d'un menu déroulant HTML


Aperçu

Apercu du snippet

Description

Code

Il peut être intéressant, lorsque nous effectuons des formulaires un peu élaborés, d'afficher les champs d'un formulaire selon le choix d'une valeur d'un menu déroulant 😉.

Même si certaines librairies JavaScript peuvent vous aider, on va voir ici comment le faire HTML/JavaScript, sans librairie ou fichier CSS particulier.

La fonction JavaScript est déclenchée avec l’événement onchange (active la fonction à chaque changement du menu déroulant). On vérifie donc quelle est la valeur récupérée pour afficher l'encadré adéquat. Ensuite, on fait une boucle sur l'ensemble des champs afin de cacher tous les autres.

Ce code doit vous permettre de comprendre comment procéder, mais je vous invite ensuite à utiliser des librairies en fonction de votre projet afin de simplifier le code.


Statistiques

Ajouté par Nazario
le 30/07/2018 à 13h16
62
lignes de code
146
vues

Aucun vote pour le moment


Code HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Adaptation d'un formulaire en fonction du menu déroulant</title>
	<script>
	function adaptForm(val) {
		// Si la valeur contient un complément de formulaires (div existant)
		if(document.getElementById(val).innerHTML) {
			// On affiche le cadre en retirant la propriété display none 
			document.getElementById(val).style.display = "";
		}
		// On fait le tour pour cacher les autres cadres
		selects = document.forms["formName"].typeAlim.options // Nombre de champs dans le menu déroulant
		// On passe sur tous les champs du menu déroulant
		for(i = 0; i < selects.length; i++) {
			var target = document.forms["formName"].typeAlim.options[i].value; // Valeur du champ du menu déroulant
			// Si c'est pas notre valeur selectionnée, on le cache
			if(target != val) {
				document.getElementById(target).style.display = "none";
			}
		}
	}
	</script>
  </head>
  <body>
	<p>Que souhaitez vous manger ?</p>
    <form name="formName">
		<select onchange="adaptForm(this.value)" name="typeAlim">
			<option selected value="legumes">Légumes</option>
			<option value="fruits">Fruits</option>
			<option value="sucre">Sucreries</option>
		</select>
		<div id="legumes">
			<p>C'est bien d'aimer les légumes ! Que préférez-vous ?</p>
			<select name="typeLegumes">
				<option>Pommes de terre</option>
				<option>Carottes</option>
				<option>Haricots</option>
			</select>
		</div>
		<div id="fruits" style="display: none">
			<p>C'est bien d'aimer les fruits ! Que préférez-vous ?</p>
			<select name="typeFruits">
				<option>Bananes</option>
				<option>Pommes</option>
				<option>Fraises</option>
			</select>
		</div>
		<div id="sucre" style="display: none">
			<p>C'est bien d'aimer le sucre, mais pas trop ! Que préférez-vous ?</p>
			<select name="typeSucre">
				<option>Barres chocolatées</option>
				<option>Bonbons</option>
				<option>Tout</option>
			</select>
		</div>
	</form>
  </body>
</html>

0 commentaire

Aucun commentaire ajouté, soyez le premier à donner votre avis !