[DOM] Solution en javascript

**nico341** · 01/03/2008, 15h48

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**htr999** · 02/03/2008, 00h13

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 :

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

**nico341** · 02/03/2008, 01h21

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

**marts** · 02/03/2008, 03h34

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**htr999** · 02/03/2008, 09h01

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Jumano** · 02/03/2008, 09h44

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**nico341** · 02/03/2008, 13h17

Cool merci beaucoup � tous

, j'ai adopt� la solution de jumano qui me parrait la plus simple et ca marche niquel.

[DOM] Solution en javascript

JavaScript

Discussions similaires

Partager

Partager