Discussion :

[delaio]

bonjour à tous,

je sais qu'il est impossible d'imbriquer des <form>. je cherche donc une autre solution mais mes connaissances en html / php / javascript sont limitées.

j'ai deux types de produits : 'a' et 'b'. ils sont disponibles en trois coloris différentes : bleu, rouge, vert.

je souhaite afficher 1 produit de chaque type avec des radios boutons me permettant de changer la couleur.
je souhaite également gérer un formulaire pour ajouter les produits à un panier.

voici comment je procède :

je liste tous mes produits 'a' et 'b' mais je n'affiche que le produit 'a bleu' et 'b bleu'. quand je clique sur un radio bouton du produit 'a' pour changer la couleur en rouge par exemple, j'appelle une fonction javascript qui masque le produit 'a bleu' et affiche le produit 'a rouge'.

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
<form>
  produit a bleu
  input radio bouton bleu rouge vert
  <form>
  input quantite + bouton pour ajouter au panier
  </form>

  produit a rouge
  input radio bouton bleu rouge vert
  <form>
  input quantite + bouton pour ajouter au panier
  </form>

  produit a vert
  input radio bouton bleu rouge vert
  <form>
  input quantite + bouton pour ajouter au panier
  </form>

  produit b bleu
  input radio bouton bleu rouge vert
  <form>
  input quantite + bouton pour ajouter au panier
  </form>

  ...

</form>

actuellement, si je laisse le code tel quel, il est impossible d'ajouter le produit 'a bleu' au panier car bug sur les forms imbriqués. je pense que c'est le premier form qu'il faut que j'enlève mais ma fonction javascript qui affiche ou non mes produits ne fonctionne alors plus (je suppose qu'elle n'est plus appelée).

j'ai mis en fichier joint un exemple de mon code en html.

merci pour votre aide.



delaio.

[delaio]

extrait html / php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			if ((($idc == '0') && ($val_produit['pr_type'] == 1)) || ($idc == '1'))
			{
			  echo '<input style="vertical-align:middle;" type="radio" name="couleur_'.$val_produit['pr_numero'].'" class="check" value="0"';
			  if ($val_produit['pr_couleur'] == 'chrome') echo ' checked="checked"';
			  echo ' id="couleur_'.$val_produit['pr_numero'].'_0" onclick="affiche_couleur_produit(\'couleur_'.$val_produit['pr_numero'].'_\', '.$val_produit['pr_numero'].');"/>&nbsp;chromé&nbsp;&nbsp;';
		 	  echo '<input style="vertical-align:middle;" type="radio" name="couleur_'.$val_produit['pr_numero'].'" class="check" value="1"';
			  if ($val_produit['pr_couleur'] == 'dore') echo ' checked="checked"';
			  echo ' id="couleur_'.$val_produit['pr_numero'].'_1" onclick="affiche_couleur_produit(\'couleur_'.$val_produit['pr_numero'].'_\', '.$val_produit['pr_numero'].');"/>&nbsp;doré&nbsp;&nbsp;';
			  echo '<input style="vertical-align:middle;" type="radio" name="couleur_'.$val_produit['pr_numero'].'" class="check" value="2"';
			  if ($val_produit['pr_couleur'] == 'blanc') echo ' checked="checked"';
			  echo ' id="couleur_'.$val_produit['pr_numero'].'_2" onclick="affiche_couleur_produit(\'couleur_'.$val_produit['pr_numero'].'_\', '.$val_produit['pr_numero'].');"/>&nbsp;blanc&nbsp;';
			}

fonction javascript :

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
function affiche_couleur_produit(couleur, id)
{
  if ((id == 1) || (id == 2) || (id == 3))
  {
	/* couleur chrome */
	if (document.getElementById(couleur+'0').checked)
	{
		document.getElementById(1).style.display = 'inline';
		document.getElementById('couleur_1_0').checked = 'checked';
		document.getElementById('couleur_2_0').checked = 'checked';
		document.getElementById('couleur_3_0').checked = 'checked'; 
	}
	else
	{
		document.getElementById(1).style.display = 'none';
	}
	/* couleur dore */
	if (document.getElementById(couleur+'1').checked)
	{ 
		document.getElementById(2).style.display = 'inline'; 
		document.getElementById('couleur_1_1').checked = 'checked';
		document.getElementById('couleur_2_1').checked = 'checked';
		document.getElementById('couleur_3_1').checked = 'checked'; 
	}
	else
	{
		document.getElementById(2).style.display = 'none';
	}
	/* couleur blanc */
	if (document.getElementById(couleur+'2').checked)
	{ 
		document.getElementById(3).style.display = 'inline'; 
		document.getElementById('couleur_1_2').checked = 'checked';
		document.getElementById('couleur_2_2').checked = 'checked';
		document.getElementById('couleur_3_2').checked = 'checked'; 
	}
	else
	{
		document.getElementById(3).style.display = 'none';
	}
  }
  else /* ((id == 4) || (id == 5) || (id == 6)) */
  {
	/* couleur chrome */
	if (document.getElementById(couleur+'0').checked)
	{ 
		document.getElementById(4).style.display = 'inline';
		document.getElementById('couleur_4_0').checked = 'checked';
		document.getElementById('couleur_5_0').checked = 'checked';
		document.getElementById('couleur_6_0').checked = 'checked'; 
	}
	else
	{
		document.getElementById(4).style.display = 'none';
	}
	/* couleur dore */
	if (document.getElementById(couleur+'1').checked)
	{ 
		document.getElementById(5).style.display = 'inline'; 
		document.getElementById('couleur_4_1').checked = 'checked';
		document.getElementById('couleur_5_1').checked = 'checked';
		document.getElementById('couleur_6_1').checked = 'checked'; 
	}
	else
	{
		document.getElementById(5).style.display = 'none';
	}
	/* couleur blanc */
	if (document.getElementById(couleur+'2').checked)
	{ 
		document.getElementById(6).style.display = 'inline'; 
		document.getElementById('couleur_4_2').checked = 'checked';
		document.getElementById('couleur_5_2').checked = 'checked';
		document.getElementById('couleur_6_2').checked = 'checked'; 
	}
	else
	{
		document.getElementById(6).style.display = 'none';
	}
  }
}

le premier <form> a été retiré. ça fonctionne très bien.