Discussion :

[blobfish75]

Bonjour,
Je rencontre un problème qui me semble assez complexe (à résoudre mais également à expliquer).
Alors voilà, j'aimerai avoir 2 boutons: origines et sous-origines. Lorsque l'utilisateur clique sur le bouton origine, une liste de radio boutons apparait. J'aimerai que en fonction du radio bouton sélectionné par l'utilisateur dans les origines, lorsque celui-ci clique sur sous-origine d'autres radio boutons apparaissent. Cependant, ces radio boutons auront des valeurs différentes en fonction de quel radio bouton est sélectionné.

Pour l'instant j'ai fais ça, mais lorsque je passe d'un bouton à l'autre (d'origine à sous-origine et vis-versa) le radio bouton qui était sélectionné ne l'est plus. De plus je n'arrive pas à afficher différents contenus pour sous origines en fonction de quel radio bouton est sélectionné pour origines. Voici mon code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 <input type="button" name="origines" value="0rigines" id="origines" onclick="listeOrigines()"/>
    <input type="button" name="origines" value="Sous origines" id="sousOrigines" onclick="listeSousOrigines()"/>

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
        function listeOrigines(){
            document.getElementById('listeSousOrigines').style.display = 'none';
            document.getElementById('listeOrigines').innerHTML=
                '<input type="radio" name="origines" value="reception" id="reception"/> <label for="reception">Reception</label>\n' +
                '    <input type="radio" name="origines" value="chargement" id="chargement"/> <label for="chargement">Chargement</label><br />\n';
            document.getElementById('listeOrigines').style.display = 'block';
        }
        function listeSousOrigines(){
          document.getElementById('listeOrigines').style.display = 'none';
 
           if(origines.value==reception){
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           if(origines.value==chargement) {
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           else{
               document.getElementById('listeSousOrigines').innerText="rien n'est selectionné"
           }
            document.getElementById('listeSousOrigines').style.display = 'block';
        }
    </script>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
    <p id="listeOrigines"></p>
    <p id="listeSousOrigines"></p>

Lorsque je selectionne un radio boutton, cela me met toujous: "rien n'est selectionné". Comment faire ?

Merci pour vos réponses !

[Invité]

Bonjour,

1- Le code JS est faux.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(origines.value==reception){

origines n'est pas défini, et une chaine s'écrit "reception" (ou 'reception').

2- As-tu vraiment besoin de 2 boutons ?
Réponse : non.
En effet, la 2ème liste peut être affichée quand on COCHE un bouton radio "origine".

3- Faut-il créé les liste "origines" via JS ?
réponse : non.
On peut très bien la mettre directement dans le <div id="listeOrigines"> (c'est mieux que <p>), en le mettant en display:none; au départ, et "block" en cliquant sur le bouton.

4- Comment seront générée les SousOrigines ?

• Par appel Ajax (à une BDD ?)
• Simplement, via JS (sans Ajax), à partir d'un array ?

[blobfish75]

Bonjour jreaux62,

Tout d'abord merci beaucoup pour toutes tes réponses, elles me sont d'une grande aide !

Pour ton 2e point, c'est vrai que ça serait plus pratique, mais comment ? je fais une onclick="une nouvelle fonction avec la liste dedans" pour chaque origine ?

Pour ton 4ème point, en fait pour l'instant j'essayais de faire des listes moi même à la main, cependant à terme ce n'est pas censé etre comme ça. En effet sur le site que je suis en train de coder, il y aura un administrateur qui pourrait créer de nouvelles origines et sous origines donc les listes viendront des BDD mais le reste du site n'est pas en JS, je l'utilise juste pour la partie dynamique, le site est codé avec Symfony en PHP/HTML

[Invité]

1- Un début de code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<input type="button" value="Origines" onclick="openListeOrigines();"/>
 
<div id="listeOrigines">
  <label><input type="radio" name="origine" value="reception" onclick="openListeSousOrigines('reception')"/> Réception</label> 
  <label><input type="radio" name="origine" value="chargement" onclick="openListeSousOrigines('chargement')"/> Chargement</label>
</div>
 
<div id="listeSousOrigines"></div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"use strict";
const listeOrigines = document.getElementById('listeOrigines');
const listeSousOrigines = document.getElementById('listeSousOrigines');
listeOrigines.style.display = 'none';
listeSousOrigines.style.display = 'none';
function openListeOrigines()
{
  listeOrigines.style.display = (listeOrigines.style.display=='none')? 'block':'none';
}
function openListeSousOrigines( origine )
{
  listeSousOrigines.style.display = 'block';
 
  switch(origine)
  {
    case 'reception' :
      listeSousOrigines.textContent = "\"Réception\" est sélectionné";
      break;
    case 'chargement' :
      listeSousOrigines.textContent = "\"Chargement\" est sélectionné"
      break;
    default:
      listeSousOrigines.textContent = "rien n'est sélectionné"
  }
}

2- Pour aller chercher les données en BDD, il faudra passer par Ajax.

N.B. Pour ma part, je ne connais pas Symfony

[blobfish75]

Tout compris merci beaucoup !!!