Discussion :

[stef22640]

Bonjour,

J'ai jamais réussi a me mettre au javascript mais je crois qu'il est temps....

je voudrai qu'une div s'affiche en fonction du choix d'un bouton radio.
C'est pour une boutique de E-commerce, j'ai des produits qui peuvent se faire dans plusieurs matières et chaque matière peut avoir différentes couleurs:

Dans ce code, je récupère toutes les matières dans une base de données puis je les affiche avec un bouton radio

Code :

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

1
2
3
4
5
6
$tbmatieres = $boutique->get_matieres($prd_details['idprd'], $langue);
foreach ($tbmatieres as $matieres) {
	$contenu .= '	<p class="prdmat">
		<input type="radio" name="idmat" value="' . $matieres['idmat'] . '">' . $matieres['libelmatiere'] . '
	</p>';
}

ensuite j'ai des div qui sont créées à la volée suivant les matières dispo mais je voudrai que seule les couleurs correspondantes à une matière soient affichées.
Les div que je veut afficher ont des propriétés différentes (comme la hauteur) suivant la matières.

Si quelqu'un a une idée

merci ++

[E.Bzz]

Bonjour,

je voudrai qu'une div s'affiche en fonction du choix d'un bouton radio.

je n'ai pas bien suivi le reste du fonctionnement, mais en partant de ce script et de celui-là, tu as presque tout ce qu'il faut

A+

[stef22640]

je teste de suite (si j'y arrive )

[stef22640]

En fait j'arrive pas à m'en sortir...

Exemple sur un produit, j'ai 3 matières avec 3 boutons radio (dont 1 selectionné en arrivant sur la page mais c'est pas encore fait)
Pour la matière N°1, j'ai 2 couleurs.
Pour le matière N°2, j'ai 8 couleurs.
Pour le matière N°3, j'ai 8 couleurs aussi.

je veux que lorsque le visiteur clique sur la matière N°1, la seule div à s'afficher soit la div 'couleur1'.
Si il clique sur la matière N°2, la div 'couleur2' remplace 'couleur1', idem pour la matiere 3.

un bout de code si ca peut aider

affichage des matières :

Code :

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

1
2
3
4
5
6
7
8
9
10
$contenu .= 			<div class="prdmatieres">';
$tbmatieres = $boutique->get_matieres($prd_details['idprd'], $langue);
foreach ($tbmatieres as $matieres) {
		$idmat = $matieres['idmat'];
		$tbcouleurs["$idmat"] = $boutique->get_couleurs($matieres['idmat'], $langue);
		$contenu .= '		<p class="prdmat">
								<input type="radio" name="idmat" value="' . $matieres['idmat'] . '">' . $matieres['libelmatiere'] . '
							</p>';
}
$contenu .= '			</div>';

contenu de $tbmatieres :

Code :

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
Array
(
    [1] => Array
        (
            [idmat] => 1
            [libelmatiere] => Coton
        )
 
    [2] => Array
        (
            [idmat] => 2
            [libelmatiere] => Laine
        )
 
    [6] => Array
        (
            [idmat] => 6
            [libelmatiere] => Cuir
        )
 
)

affichage des couleurs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$contenu .= '			<div class="prdcouleurs">';
foreach ($tbcouleurs as $tbcouleurs2) {
	$contenu .= '				<div id="couleurs' . $tbcouleurs2['idmat'] . '">';
	unset($tbcouleurs2['idmat']);
	foreach($tbcouleurs2 as $couleurs) {
		$contenu .= '				<p class="couleurs">
										<input type="radio" name="idcouleur" value="' . $couleurs['idcouleur'] . '">' . $couleurs['libelcouleur'] . '
									</p>';
	}
	$contenu .= '				</div>';
}
$contenu .= '				</div>';

contenu de $tbcouleurs :

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
Array
(
    [1] => Array
        (
            [1] => Array
                (
                    [idcouleur] => 1
                    [idmat] => 1
                    [libelcouleur] => Noir
                    [codecouleur] => 000000
                    [imgcouleur] => 
                )
 
            [idmat] => 1
            [2] => Array
                (
                    [idcouleur] => 2
                    [idmat] => 1
                    [libelcouleur] => Marron foncé
                    [codecouleur] => 330000
                    [imgcouleur] => 
                )
 
        )
 
    [2] => Array
        (
            [1] => Array
                (
                    [idcouleur] => 1
                    [idmat] => 2
                    [libelcouleur] => Noir
                    [codecouleur] => 000000
                    [imgcouleur] => 
                )
 
            [idmat] => 2
            [2] => Array
                (
                    [idcouleur] => 2
                    [idmat] => 2
                    [libelcouleur] => Marron foncé
                    [codecouleur] => 330000
                    [imgcouleur] => 
                )
 
            [3] => Array
                (
                    [idcouleur] => 3
                    [idmat] => 2
                    [libelcouleur] => Beige
                    [codecouleur] => FFFF99
                    [imgcouleur] => 
                )
 
            [4] => Array
                (
                    [idcouleur] => 4
                    [idmat] => 2
                    [libelcouleur] => Blanc
                    [codecouleur] => FFFFFF
                    [imgcouleur] => 
                )
 
            [5] => Array
                (
                    [idcouleur] => 5
                    [idmat] => 2
                    [libelcouleur] => Rouge
                    [codecouleur] => FF0000
                    [imgcouleur] => 
                )
 
            [6] => Array
                (
                    [idcouleur] => 6
                    [idmat] => 2
                    [libelcouleur] => Bordeau
                    [codecouleur] => CC0033
                    [imgcouleur] => 
                )
 
            [7] => Array
                (
                    [idcouleur] => 7
                    [idmat] => 2
                    [libelcouleur] => Kaki
                    [codecouleur] => 003300
                    [imgcouleur] => 
                )
 
            [8] => Array
                (
                    [idcouleur] => 8
                    [idmat] => 2
                    [libelcouleur] => Bleu marine
                    [codecouleur] => 000033
                    [imgcouleur] => 
                )
 
        )
 
    [6] => Array
        (
            [2] => Array
                (
                    [idcouleur] => 2
                    [idmat] => 6
                    [libelcouleur] => Marron foncé
                    [codecouleur] => 330000
                    [imgcouleur] => 
                )
 
            [idmat] => 6
            [9] => Array
                (
                    [idcouleur] => 9
                    [idmat] => 6
                    [libelcouleur] => Châtaigne
                    [codecouleur] => 993300
                    [imgcouleur] => 
                )
 
            [5] => Array
                (
                    [idcouleur] => 5
                    [idmat] => 6
                    [libelcouleur] => Rouge
                    [codecouleur] => FF0000
                    [imgcouleur] => 
                )
 
            [4] => Array
                (
                    [idcouleur] => 4
                    [idmat] => 6
                    [libelcouleur] => Blanc
                    [codecouleur] => FFFFFF
                    [imgcouleur] => 
                )
 
            [3] => Array
                (
                    [idcouleur] => 3
                    [idmat] => 6
                    [libelcouleur] => Beige
                    [codecouleur] => FFFF99
                    [imgcouleur] => 
                )
 
            [1] => Array
                (
                    [idcouleur] => 1
                    [idmat] => 6
                    [libelcouleur] => Noir
                    [codecouleur] => 000000
                    [imgcouleur] => 
                )
 
            [10] => Array
                (
                    [idcouleur] => 10
                    [idmat] => 6
                    [libelcouleur] => Camel
                    [codecouleur] => FF6600
                    [imgcouleur] => 
                )
 
            [6] => Array
                (
                    [idcouleur] => 6
                    [idmat] => 6
                    [libelcouleur] => Bordeau
                    [codecouleur] => CC0033
                    [imgcouleur] => 
                )
 
        )
 
)

[E.Bzz]

Merci de poster le code généré au lieu du code PHP

Comme indiqué dans un des exemples, il faut un onclick sur tes input, pour appeler la fonction qui va gérer l'affichage des div ...

A+

[stef22640]

je me doutais bien qu'il y avait une histoire de onclick mais vers quel genre de fonction le faire pointer ?

voila le rendu html :

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div class="prdmatieres">
	<p class="prdmat">
		<input type="radio" name="idmat" value="1">Coton
	</p>
	<p class="prdmat">
		<input type="radio" name="idmat" value="2">Laine
	</p>
	<p class="prdmat">
		<input type="radio" name="idmat" value="6">cuir
	</p>
</div>
<div class="prdcouleurs">
	<div id="couleurs1">
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="1">Noir
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="2">Marron foncé
		</p>
	</div>
	<div id="couleurs2">
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="1">Noir
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="2">Marron foncé
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="3">Beige
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="4">Blanc
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="5">Rouge
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="6">Bordeau
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="7">Kaki
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="8">Bleu marine
		</p>
	</div>
	<div id="couleurs6">
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="2">Marron foncé
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="9">Châtaigne
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="5">Rouge
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="4">Blanc
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="3">Beige
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="1">Noir
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="10">Camel
		</p>
		<p class="couleurs">
			<input type="radio" name="idcouleur" value="6">Bordeau
		</p>
	</div>	
</div>

[E.Bzz]

Un début :
d'abord, il faut donner un id (unique dans la page) aux éléments auxquels tu veux pouvoir accéder facilement :

Code :

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

<div id="les_couleurs" class="prdcouleurs">

Code :

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

1
2
3
4
5
6
function aff(obj) {
var liste_div = document.getElementById('les_couleurs').getElementsByTagName('div'); // récupère la liste des div à gérer
for (var i=0; i<liste_div.length; i++)   // Parcours tous les div "couleur"
    liste_div[i].style.display='none';   // et les masque
document.getElementById('couleurs' + obj.value).style.display = 'block';  // Affiche celui correspondant au radio cliqué (en fonction de sa value)
}

Code :

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

<input type="radio" name="idmat" value="1" onclick="aff(this);">Coton

Même onclick pour les 2 radio suivants ...

A+

[Darkroro]

EDIT: bon, on a été plus rapide que moi lol... cependant j'utiliserais plutôt la propriété display que visibility...

tu fais une fonction dans ce genre :

Code :

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

1
2
3
4
 
function switchColor(colorNum) {
 
}

dans laquelle en fonction de colorNum tu vas utiliser :

document.getElementById("nomdudivàafficherouàcacher").style.display=""
ou
document.getElementById("nomdudivàafficherouàcacher").style.display="none"

et dans ton HTML un onclick lançant la fonction sur tes radio :
(le this.value récupère la "value" du champ sur lequel on se trouve)

Code :

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

1
2
 
<input type="radio" name="idmat" value="1" onclick="switchColor(this.value)">Coton

je peux t'écrire la fonction complète mais t'apprendrais plus grand chose, ce que je te donne c'est le basic, y'a des truc plus opti sans doute...

[stef22640]

Super c'est pile poil ce qu'il me fallait j'ai réussi grâce a vous deux:

il y avait une erreur (inversion entre les_div et liste_div) et bizarrement ca ne fonctionne pas avec visibility donc j'ai mis display

Code :

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

1
2
3
4
5
6
function aff(obj) {
var liste_div = document.getElementById('coul').getElementsByTagName('div'); // récupère la liste des div à gérer
for (var i=0; i<liste_div.length; i++)   // Parcours tous les div "couleur"
    liste_div[i].style.display='none';   // et les masque
document.getElementById('couleurs' + obj.value).style.display = 'block';  // Affiche celui correspondant au radio cliqué (en fonction de sa value)
}

[stef22640]

En fait il reste une erreur...

lorsque le visiteur clique sur le bouton radio tout va bien ca marche

le problème c'est que quand on arrive sur la page, certains boutons sont cochés automatiquement suivant le modèle en photo (par exemple coton et noir)
mais toutes les couleurs sont affichées, même celle des autres div.

je suppose que c'est à cause du onclick. j'ai essayé avec oncheck mais c'est pire, il n'y a plus rien qui marche.

[E.Bzz]

cependant j'utiliserais plutôt la propriété display que visibility...

Moi aussi
C'était une erreur (écris trop vite)

(inversion entre les_div et liste_div)

Pas inversion : inattention

Et de deux

Pour ton dernier (?) problème : c'est juste l'initialisation de ta page qu'il te reste à régler : il faut que tu définisses (en CSS) les propriétés "display" des div en fonction du radio que tu coches par défaut au chargement de la page

... bon, pas de code dans ce post, donc pas de boulette

EDIT : je corrige le code initial ...

A+

[stef22640]

C'est bon, c'est résolu avec PHP et CSS

Code :

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

1
2
3
4
5
6
7
 
if ($caracphoto['idmat'] == $tbcouleurs2['idmat']) {
	$contenu .= '<div id="couleurs' . $tbcouleurs2['idmat'] . '">';
}
else {
	$contenu .= '<div id="couleurs' . $tbcouleurs2['idmat'] . '" style="display: none;">';
}

encore merci ++