Division Conditionnelle dans formulaire
Résolu
Napo_Leon
-
cs_PaTaTe Messages postés 1471 Date d'inscription Statut Contributeur Dernière intervention -
cs_PaTaTe Messages postés 1471 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 compte désactivé - Guide
- Microsoft skype division - Télécharger - Téléphonie & Visio
- Excel liste déroulante conditionnelle - 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>
