Division Conditionnelle dans formulaire

Résolu/Fermé

Napo_Leon - Modifié le 19 déc. 2019 à 11:31
cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 - 1 févr. 2020 à 18:00

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

A voir également:

Division Conditionnelle dans formulaire
Mise en forme conditionnelle excel - Guide
Formulaire de réclamation facebook - Guide
Mise en forme conditionnelle powerpoint ✓ - Forum Powerpoint
Google sheet mise en forme conditionnelle 2 conditions ✓ - Forum Bureautique
Confirmer le nouvel envoi du formulaire err_cache_miss ✓ - Forum HTML

1 réponse

Réponse 1 / 1

cs_PaTaTe Messages postés 2126 Date d'inscription mercredi 21 août 2002 Statut Contributeur Dernière intervention 19 février 2021 493
Modifié le 1 févr. 2020 à 18:03

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>

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook

Compte HOTMAIL bloqué . Que faire ?

Contacter le "bon coin"

formulaire de remboursement chez Free

compte hotmail bloqué

Discussions similaires

Newsletters