Formulaire en cascade

Fermé
Vinciane - 3 avril 2021 à 11:07
Vinciane_2706 Messages postés 2 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 7 avril 2021 - 7 avril 2021 à 18:52
Bonjour,
depuis le confinement je découvre le codage. J'ai commencé par l'HTML, le CSS, puis le PHP et maintenant Javascript.
J'essaie de réaliser un formulaire en cascade de ce type-là:
. Français, Art et culture
. Mathématiques, Sciences et Techniques
...
Avec la possibilité de cocher un ou plusieurs et lorsque je coche par exemple Français, Art et culture , un autre sous-menu s'affiche. Par exemple:
. Français, Art et culture
. Français
. Education culturelle et artistique

J'arrive à faire apparaitre mon sous-menu quand je coche Français, Art et culture. Mais Mathématiques disparait mais je veux qu'il reste.
Pouvez-vous m'aider en me montrant quel code vous utiliseriez?
Merci d'avance.

Vinciane (novice en codage mais qui prend plaisir à se compliquer la vie ;-))

3 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 avril 2021 à 13:10
Bonjour,

Commence par nous montrer ce que tu as tenté de faire.

NB: Pour poster ton code sur le forum, tu dois utiliser les balises de code
Explications à lire entièrement, disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
1
Vinciane_2706 Messages postés 2 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 7 avril 2021
7 avril 2021 à 18:27
Bonjour,

Merci pour ta réponse Jordane.
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">

<title> Préparation de leçon </title>

<link rel="stylesheet" href="css/styles.css">

</head>
<body>
<div id="Domaines">
<h1 id="gros_titre"> Domaine(s) disciplinaire(s) </h1>
<input type="checkbox" id="Français, Art et culture" value="Français, Art et culture">
<label for="Français, Art et culture"> Français, Art et culture</label><br>
<input type="checkbox" id="Langues modernes" value="Langues modernes">
<label for="Langues modernes"> Langues modernes</label><br>
<input type="checkbox" id="Mathématiques, Sciences et Techniques" value="Mathématiques, Sciences et Techniques">
<label for="Mathématiques, Sciences et Techniques"> Mathématiques, Sciences et Techniques</label>
<br><input type="checkbox" id="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale" value="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale">
<label for="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale"> Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale</label>
<br><input type="checkbox" id="Education physique, Bien-être et Santé" value="Education physique, Bien-être et Santé">
<label for="Education physique, Bien-être et santé"> Education physique, Bien-être et Santé</label>
<br>
</div>

<div id="Disciplines">
<h1 id= "gros_titre"> Discipline(s)</h1>
<input type="checkbox" id="Français" value="Français">
<label for="Français"> Français</label>
<br><input type="checkbox" id="Education culturelle et artistique" value="Education culturelle et artistique">
<label for="Education culturelle et artistique"> Education culturelle et artistique</label>
<br><input type="checkbox" id="Eveil aux langues" value="Eveil aux langues">
<label for="Eveil aux langues"> Eveil aux langues</label>
<br><input type="checkbox" id="Mathématiques" value="Mathématiques">
<label for="Mathématiques"> Formation mathématiques</label>
<br> <input type="checkbox" id="Sciences" value="Sciences">
<label for="Sciences"> Formation scientifique</label>
<br><input type="checkbox" id="Formation manuelle, techniques, technologique et numérique" value="Formation manuelle, techniques, technologique et numérique">
<label for="Formation manuelle, techniques, technologique et numérique"> Formation manuelle et technique</label>
<br><input type="checkbox" id="Formation historique, géographique, économique et sociale" value="Formation historique, géographique, économique et sociale">
<label for="Formation historique, géographique, économique et sociale"> Formation humaine et sociale</label>
<br><input type="checkbox" id="Education à la philosophie citoyenneté" value="Education à la philosophie citoyenneté">
<label for="Education à la philosophie citoyenneté"> Education à la philosophie et à la citoyenneté</label>
<br><input type="checkbox" id="Education physique et santé" value="Education physique et santé">
<label for="Education physique et santé"> Psychomotricité</label>
<br>
</div>

</body>


J'aimerais arriver à quand je coche: Français, Art et culture dans Domaine --> Français et Education culturelle et artistique apparaissent dans Discipline. Si coche Langues modernes dans domaine, Eveil aux langues apparaissent dans discipline et ainsi de suite.
Avant, j'avais fait ce code là:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">

<title> Menu with checkbox</title>

<link rel="stylesheet" href="css/styles.css">

<script language="javascript" type="text/javascript">

function GereControle(Controleur, Controle, Masquer)
{
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);

if (Masquer=='1')
objControle.style.display=(objControleur.checked==true)?'block':'none';
else
objControle.disabled=(objControleur.checked==false)?false:true;


var all=document.getElementById('groupe').getElementsByTagName("input")

var quantite=0

for (var i=0; i < all.length; i++){

if (all[i].checked==false){
all[i].parentNode.style.display='none'
quantite++
}
}

if(quantite==all.length)
{

for (var i=0; i < all.length; i++){

if (all[i].getAttribute('type')=='checkbox'){
all[i].parentNode.style.display='block'
}
}

}

}

function maj(parent,val)
{
res= window.opener.document.getElementById("res");
groupe=window.opener.document.getElementById("parent");
res.innerHTML=val;
groupe.innerHTML=parent;
self.close();
}

</script>
</head>
<body>
<div>
Préparation de leçon
</div>
<br class="clear"/>
<div id="sub-header">
<div id="sub-header-center">
<div id="menu">
<ul id="nav"> Domaines et disciplines </ul>
</div>
</div>
</div>
<div id='groupe'>
<div>
<input type="checkbox" id="coche_acheter" value="acheter et vendre" onClick="GereControle('coche_acheter', 'modele2', '1');"/>
<label for="coche_acheter"> Français, Art et culture</label>

<ul id="modele2" name="modele" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.1')">Français</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.2')">Education culturelle et artisitique</a>
</li>
</ul>
<br/>
</div>


<div>
<input type="checkbox" id="coche_auto" name="coche" onClick="GereControle('coche_auto', 'modeleAuto', '1');"/>
<label>Langues modernes</label>

<ul id="modeleAuto" name="modeleAuto" style="display:none;" disabled="disabled">
<li>
<a href="" onclick="maj('AUTOS ET MOTOS','Sous-Menu 2.1')"> Eveil aux langues </a>
</li>
</ul>
<br/>
</div>



<div>
<input type="checkbox" id="coche_emploi" name="coche" onClick="GereControle('coche_emploi', 'modeleEmploi', '1');"/>
<label> Mathématiques, Sciences et Techniques </label>

<ul id="modeleEmploi" name="modeleEmploi" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('EMPLOI (OFFRE ET CANDIDATURE)','Sous-Menu 3.1')"> Mathématiques </a>
</li>
<li>
<a href="#" onclick="maj('EMPLOI (OFFRE ET CANDIDATURE)','Sous-Menu 3.2')"> Sciences</a>
</li>
<li>
<a href="#" onclick="maj('EMPLOI (OFFRE ET CANDIDATURE)','Sous-Menu 3.3')"> Techniques</a>
</li>
</ul>
<br/>
</div>

<div>
<input type="checkbox" id="coche_immoLoc" name="coche" onClick="GereControle('coche_immoLoc', 'modeleImmoLoc', '1');" />
<label> Sciences humaines et Education à la philosophie et citoyenneté </label>
<ul id="modeleImmoLoc" name="modeleImmoLoc" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('IMMOBILIER (LOCATION)','Sous-Menu 4.1 ')"> Sciences humaines </a>
</li>
<li>
<a href="#" onclick="maj'IMMOBILIER (LOCATION)','Sous-Menu 4.2'')"> Education à la philosophie et citoyenneté </a>
</li>
</ul>
<br/>
</div>

<div>
<input type="checkbox" id="coche_EPS" name="coche" onClick="GereControle('coche_EPS', 'modeleEPS', '1');" />
<label> Education physique, santé et bien-être </label>
<ul id="modeleEPS" name="modeleEPS" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('Education','Sous-Menu 5.1 ')"> Psychomotricité </a>
</li>
</ul>
<br/>
</div>

Mais tout ce que je n'avais pas coché disparaissait et les disciplines qui apparaissaient n'étaient pas cochables.

Merci d'avance pour vos conseils.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
7 avril 2021 à 18:34
Merci, comme je te l'ai demandé, d'utiliser les balises de code pour poster ton code .
0
Vinciane_2706 Messages postés 2 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 7 avril 2021
7 avril 2021 à 18:52
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    
    <title> Préparation de leçon </title>
    
    <link rel="stylesheet" href="css/styles.css">
   
   </head>
   <body>
      <div id="Domaines">
      <h1 id="gros_titre"> Domaine(s) disciplinaire(s) </h1>
      <input type="checkbox" id="Français, Art et culture" value="Français, Art et culture">
      <label for="Français, Art et culture"> Français, Art et culture</label><br>
      <input type="checkbox" id="Langues modernes" value="Langues modernes">
      <label for="Langues modernes"> Langues modernes</label><br>
      <input type="checkbox" id="Mathématiques, Sciences et Techniques" value="Mathématiques, Sciences et Techniques">
      <label for="Mathématiques, Sciences et Techniques"> Mathématiques, Sciences et Techniques</label>
      <br><input type="checkbox" id="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale" value="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale">
      <label for="Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale"> Sciences humaines et Education à la philosophie citoyenneté, Religion ou Morale</label>
      <br><input type="checkbox" id="Education physique, Bien-être et Santé" value="Education physique, Bien-être et Santé">
      <label for="Education physique, Bien-être et santé"> Education physique, Bien-être et Santé</label>
      <br>        
      </div>

      <div id="Disciplines">
      <h1 id= "gros_titre"> Discipline(s)</h1>
      <input type="checkbox" id="Français" value="Français">
      <label for="Français"> Français</label>
      <br><input type="checkbox" id="Education culturelle et artistique" value="Education culturelle et artistique">
      <label for="Education culturelle et artistique"> Education culturelle et artistique</label>
      <br><input type="checkbox" id="Eveil aux langues" value="Eveil aux langues">
      <label for="Eveil aux langues"> Eveil aux langues</label>
      <br><input type="checkbox" id="Mathématiques" value="Mathématiques">
      <label for="Mathématiques"> Formation mathématiques</label>
      <br> <input type="checkbox" id="Sciences" value="Sciences">
      <label for="Sciences"> Formation scientifique</label>
      <br><input type="checkbox" id="Formation manuelle, techniques, technologique et numérique" value="Formation manuelle, techniques, technologique et numérique">
      <label for="Formation manuelle, techniques, technologique et numérique"> Formation manuelle et technique</label>
      <br><input type="checkbox" id="Formation historique, géographique, économique et sociale" value="Formation historique, géographique, économique et sociale">
      <label for="Formation historique, géographique, économique et sociale"> Formation humaine et sociale</label>
      <br><input type="checkbox" id="Education à la philosophie citoyenneté" value="Education à la philosophie citoyenneté">
      <label for="Education à la philosophie citoyenneté"> Education à la philosophie et à la citoyenneté</label>
      <br><input type="checkbox" id="Education physique et santé" value="Education physique et santé">
      <label for="Education physique et santé"> Psychomotricité</label>
      <br>
      </div>

   </body>


Voici le code HTML que j'aimerais utiliser et j'aimerais que les Disciplines ne s'affichent que si on coche leur domaine correspondant. Donc si je coche: Français, Art et Culture dans les domaines, j'aimerais que seul Francais et Education artistique et culturelle s'affichent. Pareil pour Langues Modernes, ce serait Eveil aux langues, ...
0