afficher une div en fonction d'un bouton radio

Version imprimable

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:

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 :roll:

merci ++

11/09/2009, 12h28
E.Bzz

Bonjour,

Citation:

Envoyé par stef22640

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+
11/09/2009, 12h48
stef22640

je teste de suite (si j'y arrive :?)

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:

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:

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:

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:

11/09/2009, 14h40
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+

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:

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>

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:

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

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:

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

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

A+

11/09/2009, 15h14
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:

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:

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...

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:

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) }

11/09/2009, 16h06
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.
11/09/2009, 16h16
E.Bzz

Citation:

Envoyé par Darkroro

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

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

Citation:

Envoyé par stef22640

(inversion entre les_div et liste_div)

Pas inversion : inattention

Et de deux :aie: :oops:

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 :mrgreen:

EDIT : je corrige le code initial ...

A+

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

Code:

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 ++