[DOM] Solution en javascript

Version imprimable

01/03/2008, 15h48
nico341

[DOM] Solution en javascript

Bonjour à tous,

Je suis en train de développer un site web j'ai une page qui me sert de commande direct, les clients abitués choisir un produit à l'aide d'un menu déroulant, choisissent la quantité ainsi que les atributs du produit puis font de même pour un autre produit si necessaire.

J'ai fait en sorte qu'il n'y est qu'une seule ligne de produit disponible au debut, au moment ou la personne choisit un produit dans le menu déroulant, une 2eme ligne apparait etc..

Aussi, sur le menu déroulant j'ai placé un Onchange:

Code:

onChange="document.getElementById(\'directbuy\').submit()"

Se qui me permet d'actualiser la page et faire apparaitre un second menu deroulant.

Mon soucis est le suivant, lorsque je choisit un produit, celui est automatiquement ajouté au panier... j'aimerai que l'ajout au panier se fasse que lorsqu'e je clique sur le bouton ajouter au panier.

On m'a conseillé de placer en javascript l'ajout d'une variable au moment du clique sur le BOUTON mais je ne sait comment faire ca...

Je viens donc vous demander de l'aide ;)

salut
d'apres moi le mieux c que tu fasses une fonction consMenuDerProd() en te servant des propriétés DOM. puis dans <body></body> tu déclare des endroits où il faudra ajouter des menu en faisant des <div>. finalement, sert-toi d'un lien et l'evenement onClick pour l'ajout d'un nouveau menu ( à voir si on veux implémenter avec l'évenement onChange de chaque menu ... )

voici un exemple

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
 
<head>
<script>
var nbProd=1;
function consMenuDerProd(nb){
	// le premier menu a le id NAME=produit1
	// le deuxieme menu aura pour id NAME=produit2 ...
 
	// construire dynamiquement les noeuds
	elemSelect = document.createElement("select");
	elemSelect.setAttribute("name","produit"+nb);
 
	elemOption = document.createElement("option");
	elemOption.setAttribute("value","cahierAAA");
	text = document.createTextNode("Cahier AAA");
	elemOption.appendChild(text);
	elemSelect.appendChild(elemOption);
 
	elemOption = document.createElement("option");
	elemOption.setAttribute("value","styloBBB");
	text = document.createTextNode("Stylo BBB");
	elemOption.appendChild(text);
	elemSelect.appendChild(elemOption);
 
	elemOption = document.createElement("option");
	elemOption.setAttribute("value","crayonCCC");
	text = document.createTextNode("Crayon CCC");
	elemOption.appendChild(text);
	elemSelect.appendChild(elemOption);
 
	// ajouter au div "lesMenus"	
	elemDivMenus = document.getElementById("lesMenus");
 
	elemBR = document.createElement("br");
	elemDivMenus.appendChild(elemBR);
 
	elemDivMenus.appendChild(elemSelect);
}
 
// on pourrait faire une fonction consMenuDerQuant pour la construction de quantités ...
</script>
</head>
<body>
	<form>
		<div id="lesMenus">
			<script>consMenuDerProd(nbProd); nbProd++;</script>
		</div>
		<a href="#" onClick="consMenuDerProd(nbProd);">Ajouter...</a>
	</form>
</body>

02/03/2008, 01h21
nico341

Le soucis est que le menu deroulant contient +100 prduits repertorié à partir d'une bdd.

Code:

1
2
3
4
5
6
7
8
9
 
<div>
	<select onchange="this.parentNode.appendChild(this.cloneNode(true));">
		<option value="0"></option>
		<option value="1">un</option>
		<option value="2">deux</option>
		<option value="3">trois</option>
	</select>
</div>

Citation:

Envoyé par nico341

Le soucis est que le menu deroulant contient +100 prduits repertorié à partir d'une bdd.

il suffit de faire une boucle for sur les produits mais cela dépend de ton implémentation. soit t'as une BDD en fichier XML que tu parse avec docXML, tu récupère les noeuds avec getElementsByTagName qui te donne un tableau en Array et la fonction devient
Code:

1 2 3 4 5 6 7 8 for (i=0; i<tableProd.length; i++){ elemOption = document.createElement("option"); elemOption.setAttribute("value",tableProd[i]); text = document.createTextNode(tableProd[i]); elemOption.appendChild(text); elemSelect.appendChild(elemOption); }
soit tu le fais en PHP ^^

Tu peux créer dans ton formulaire un champs caché dont la valeur sera alimentée au click sur le bouton.
Code:

1 2 3 4 5 <form id="form" name="form" method="post" action=""> <input type="hidden" name="validation_panier" id="validation_panier" /> <input type="submit" name="button" id="button" value="Envoyer" onclick="document.form.validation_panier.value='OK'" /> </form>
Ensuite avant ta requète SQL d'ajout au panier tu testes si la valeur de ton champs caché est à "OK"
Code:

1 2 3 4 5 <?php if($_POST['validation_panier'] == "OK") { On effectue la requète }

02/03/2008, 13h17
nico341

Cool merci beaucoup à tous :D, j'ai adopté la solution de jumano qui me parrait la plus simple et ca marche niquel. ;)