Division Conditionnelle dans formulaire
Résolu
Napo_Leon
-
cs_PaTaTe Messages postés 2126 Date d'inscription Statut Contributeur Dernière intervention -
cs_PaTaTe Messages postés 2126 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je suis vraiment débutant.
Je souhaite faire un formulaire html qui affiche une division "Etudiant" ou une division "Employé" en fonction du statut d'un input type radio
J'ai essayé avec le fichier ci dessous mais ça ne marche pas si je clique directement sur Working.
Quelqu'un peut-il m'aider ?
Merci
Léon
**Modifié par la modération pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE
Je suis vraiment débutant.
Je souhaite faire un formulaire html qui affiche une division "Etudiant" ou une division "Employé" en fonction du statut d'un input type radio
J'ai essayé avec le fichier ci dessous mais ça ne marche pas si je clique directement sur Working.
Quelqu'un peut-il m'aider ?
Merci
Léon
**Modifié par la modération pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Cochez la case correspondant à votre status</p>
<!-- <button onclick="myFunction()">Try it</button> -->
<input type="radio" name="status" value="Studying" onchange="myFunction()"> Studying
<input type="radio" name="status" value="Working" onchange="myFunction()"> Working
<div id="myDIV1" style ="display:none">
Ici tu présentes les élements du formulaire pour les étudiants
</div>
<div id="myDIV2" style ="display:none">
Ici tu présentes les élements du formulaire pour les travailleurs
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
</script>
</body>
</html>
Configuration: Macintosh / Safari 13.0.4
A voir également:
- Division Conditionnelle dans formulaire
- Whatsapp formulaire opposition - Guide
- Mise en forme conditionnelle excel - Guide
- Formulaire de réclamation facebook - Guide
- Excel liste déroulante conditionnelle - Guide
- Formulaire de reclamation instagram - Guide
1 réponse
Bonjour,
Avec quelques corrections ça fonctionne ^^
Avec quelques corrections ça fonctionne ^^
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Cochez la case correspondant à votre status</p>
<!-- <button onclick="myFunction()">Try it</button> -->
<input type="radio" id="studying" name="status" value="Studying" onchange="myFunction()"> Studying
<input type="radio" id="working" name="status" value="Working" onchange="myFunction()"> Working
<div id="myDIV1" style ="display:none">
Ici tu présentes les élements du formulaire pour les étudiants
</div>
<div id="myDIV2" style ="display:none">
Ici tu présentes les élements du formulaire pour les travailleurs
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
if (document.getElementById('studying').checked) {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
</script>
</body>
</html>
