[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

Vue hybride

Discussions similaires

Partager

Partager