Division Conditionnelle dans formulaire [Résolu]

Signaler
-
cs_PaTaTe
Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
-
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
<!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

1 réponse

Messages postés
2078
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
18 février 2020
203
Bonjour,

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>


Un petit merci aux bénévoles du site ne coûte rien, tout comme un sujet passé en résolu quand il l'est :)
[PaTaTe]