Ajout d'une liste déroulante dynamique (PHP / Javascript)

kelaan · 04/12/2011, 17h23

Bonjour,
j'ai besoin de votre aide, car là je séche.

En fait je créais, un formulaire avec un select où il va chercher tout les produits de la base de donnée, seulement l'utilisateur peut vouloir plusieurs produits, alors j'ai rajouter un petit plus pour qu'il y est un nouveau champs select en dessous de celui-ci.
Si c'était un simple input ce serait facile mais un avec une liste déroulante je n'y arrive pas.

Voilà mon code:

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
<?php
include_once 'include/configuration.php';
verificationAutorisationAcces($informationsUtilisateur['type'] == 'responsable');
 
	// On selectionne la commande souhaitée ainsi que ses produits commandés
 
 
 
?>
 
<script>
function create_prod(i,tab) {
 
var i2 = i + 1;
 
	document.getElementById('prod_'+i).InnerHTML = '<select name="prod"><br><br>' for(var j = 0; j < tab.length; i++) { '<option value="'document.write(tab[j][1])'" id="prod" name="informations_prod">'document.write(tab[j][1])' - Prix : 'document.write(tab[j][2])'$ - 'document.write(tab[j][3])' produits encore disponibles"</option>'}'</select>';
	document.getElementById('prod_'+i).innerHTML += (i <= 10) ? '<br /><span id="prod_'+i2+'"><a href="javascript:create_prod('+i2+')"><img src="images/add.png" alt="" /></a></span>' : '';
 
 
}
</script>
 
 
<form method="post" action="ajouter_commande.php">
 
	Article: <?php
	$requete1 = pg_query($lienConnexionBdd, 'SELECT * FROM produit');
	?><select name="prod"><br><br>
	<script>
		var tab = new Array();
		var m = 0;
	</script>
	<?phpwhile ($infosProduit = pg_fetch_array($requete1)) { ?> 
		<option value="<?php echo $infosProduit['libelle'];?>" id="prod" name="informations_prod"><?php echo $infosProduit['libelle'];?> - Prix : <?php echo $infosProduit['pu'];?>$ - <?php echo $infosProduit['qte_dispo'];?> produits encore disponibles"</option>
		<script> 
		m = m +1;
		tab[m][1] = <?php $infosProduit['libelle']; ?> 
		tab[m][2] = <?php $infosProduit['pu']; ?> 
		tab[m][3] = <?php $infosProduit['qte_dispo']; ?> 
		</script><?php
	} ?>
	</select> &nbsp;
	Quantité: <input type="text" name="qte" alt="quantite"/> &nbsp;
	<span id="prod_1"><a href="javascript:create_prod(1,tab)"><img src="images/add.png" alt="" /></a></span>
 
	<center><input type="submit" value="envoyer"/><input type="reset" value="effacer"/></center>
 
</form>

J'ai changé un petit peu mon code, car je pense que pour réussir à récupérer les données il faut que je mette les valeurs de ma table sql dans un tableau javascript que je fais passer en paramètre, mais du coup ça ne m'affiche plus rien...

Merci d'avance de votre aide.

NoSmoking · 04/12/2011, 17h53

Bonjour,
tout d'abord le code PHP ne nous est d'aucune utilité il est préférable de mettre le code HTML généré.

Ceci étant pas bien compris si il s'agissait d'ajouter le même SELECT, dans ce cas il existe l'attribut multiple pour les SELECTs qui permet de récupérer plusieurs choix.

Dans ta fonction on peut remarquer un document.write qui présente l'avantage d'effacer ta page lorsque celle ci est construite, à bannir donc.

Enfin il est souvent préférable d'utiliser les méthodes DOM comme createElement, appendChild...

kelaan · 04/12/2011, 18h07

Tout d'abord, merci d'avoir pris le temps de bien vouloi m'aider,

Cependant j'aimerais vous poser quelques questions quand à votre réponse.

Je ne comprends pas vraiment pourquoi vous dîte que ma partie PHP ne sert à rien? Quelle partie exactement ne sert à rien?

Ensuite je ne connais pas vraiment l'attribut multiple mais vais-je pouvoir récupérer en javascript les informations du select grâce à multiple, un truc comme

Document.getElementById.multiple?

J'ai bien compris pour le rester.
Merci

NoSmoking · 04/12/2011, 18h40

Citation:

Je ne comprends pas vraiment pourquoi vous dîte que ma partie PHP ne sert à rien? Quelle partie exactement ne sert à rien?

la source PHP n'est pas porteuse du résultat mis à disposition par le navigateur, si l'on veut analyser la source pour vérifier si il existe des erreurs de syntaxe, pour test comment fait-on sans la base de données

Il est donc important de montrer le code HTML généré, click droit -> afficher la source -> copier/coller (en prenant soin de ne pas laisser d'informations sensibles).

Citation:

Ensuite je ne connais pas vraiment l'attribut multiple mais vais-je pouvoir récupérer en javascript les informations du select grâce à multiple...

il te suffit de parcourir les options et de vérifier si elles sont checked, de plus si il a soumission elles sont récupérables sous forme de tableau pour peu que le NAME du select soit de la forme "nom_select[]"

kelaan · 04/12/2011, 19h20

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
<script>
function create_prod(i) {
 
var i2 = i + 1;
 
	var elmt = document.getElementById('pr');
	document.getElementById('prod_'+i).InnerHTML = '<select name="prod"><br><br>';
	for(var j=0; j< elmt.options.length; j++){if(elmt.options[j].selected == true){
		document.getElementById('prod_'+i).InnerHTML += '<option value="prod" id="prod"'+j'">'+elmt.options[j].value;+'</option>'; 
		}
	}
 
	document.getElementById('prod_'+i).InnerHTML += '</select>';
	document.getElementById('prod_'+i).innerHTML += (i <= 10) ? '<br /><span id="prod_'+i2+'"><a href="javascript:create_prod('+i2+')"><img src="images/add.png" alt="" /></a></span>' : '';
 
 
}
</script>
 
 
<form method="post" action="ajouter_commande.php">
 
	Article: <select name="prod" id="pr"><br><br>
 
		<option value="gomme rose" id="prod" name="informations_prod">gomme rose - Prix : 0.25$ - 905 produits encore disponibles"</option>
 
		<option value="crayon HB par 10" id="prod" name="informations_prod">crayon HB par 10 - Prix : 0.50$ - 2980 produits encore disponibles"</option>
 
		<option value="calepin 50 p. gd format" id="prod" name="informations_prod">calepin 50 p. gd format - Prix : 0.35$ - 1425 produits encore disponibles"</option>
 
 
		<option value="calculette poche" id="prod" name="informations_prod">calculette poche - Prix : 2.00$ - 800 produits encore disponibles"</option>
 
		<option value="bloc notes 100 p" id="prod" name="informations_prod">bloc notes 100 p - Prix : 0.70$ - 1000 produits encore disponibles"</option>
 
		<option value="bloc notes 200 p" id="prod" name="informations_prod">bloc notes 200 p - Prix : 1.20$ - 980 produits encore disponibles"</option>
 
		<option value="calcul. FinanciÃ¨re" id="prod" name="informations_prod">calcul. FinanciÃ¨re - Prix : 3.50$ - 490 produits encore disponibles"</option>
 
		<option value="gomme bleue dure" id="prod" name="informations_prod">gomme bleue dure - Prix : 0.20$ - 900 produits encore disponibles"</option>
 
		<option value="stylo bille bleu par 3" id="prod" name="informations_prod">stylo bille bleu par 3 - Prix : 0.30$ - 1000 produits encore disponibles"</option>
 
			</select> &nbsp;
	Quantité: <input type="text" name="qte" alt="quantite"/> &nbsp;
	<span id="prod_1"><a href="javascript:create_prod(1)"><img src="images/add.png" alt="" /></a></span>
 
	<center><input type="submit" value="envoyer"/><input type="reset" value="effacer"/></center>
 
</form>

J'ai modifié un petit peu mais ça ne marche toujours, en fait mon gros probléme et que j'utilise WAPP Stack que je ne connais pas du tout, Bon là la console d'erreur m'indique qu'il me manque une virgule dans cette ligne de code:

Code :

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

document.getElementById('prod_'+i).InnerHTML += '<option value="prod" id="prod"'+j'">'+elmt.options[j].value;+'</option>';

Bovino · 05/12/2011, 08h04

Code :

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

InnerHTML

JavaScript est sensible à la casse !

kelaan · 05/12/2011, 10h50

Il y a un problème dans mon InnerHTML?

Voilà où j'en suis après avoir retravaillée dessus, il ne me met plus de problèmes de points virgules, mais il ne m'affiche rien pour autant, quand j'appuie sur le + il me rajoute juste un + et rien d'autres, et en plus aucune erreurs dans la console d'erreurs j'arrive pas à comprendre :

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
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php
 
include_once 'include/configuration.php';
 
verificationAutorisationAcces($informationsUtilisateur['type'] == 'responsable');
 
 
 
	// On selectionne la commande souhaitée ainsi que ses produits commandés
 
 
 
 
 
 
 
?>
 
 
 
<script>
 
function create_prod(i) {
 
 
 
var i2 = i + 1;
 
 
 
	var elmt = document.getElementById('pr');
 
	document.getElementById('prod_'+i).InnerHTML = '<select name="prod"><br><br>';
 
	for(var j=0; j< elmt.options.length; j++){
 
		document.getElementById('prod_'+i).InnerHTML += '<option value="prod" id="prod"'+j+'">';
 
		document.getElementById('prod_'+i).InnerHTML += elmt.options[j];
 
		document.getElementById('prod_'+i).InnerHTML += '</option>'; 
 
 
 
	}
 
 
 
	document.getElementById('prod_'+i).InnerHTML += '</select>';
 
	document.getElementById('prod_'+i).innerHTML += (i <= 10) ? '<br /><span id="prod_'+i2+'"><a href="javascript:create_prod('+i2+')"><img src="images/add.png" alt="" /></a></span>' : '';
 
 
 
 
 
}
 
</script>
 
 
 
 
 
<form method="post" action="ajouter_commande.php">
 
 
 
	Article: <?php
 
	$requete1 = pg_query($lienConnexionBdd, 'SELECT * FROM produit where qte_dispo > 0');
 
	?><select name="prod" id="pr"><br><br>
 
	<?php while ($infosProduit = pg_fetch_array($requete1)) { ?> 
 
		<option value="<?php echo $infosProduit['libelle'];?>" id="prod" name="informations_prod"><?php echo $infosProduit['libelle'];?> - Prix : <?php echo $infosProduit['pu'];?>$ - <?php echo $infosProduit['qte_dispo'];?> produits encore disponibles</option>
 
		<?php
 
	} ?>
 
	</select> &nbsp;
 
	Quantité: <input type="text" name="qte" alt="quantite"/> &nbsp;
 
	<span id="prod_1"><a href="javascript:create_prod(1)"><img src="images/add.png" alt="" /></a></span>
 
 
 
	<center><input type="submit" value="envoyer"/><input type="reset" value="effacer"/></center>
 
 
 
</form>

Bovino · 05/12/2011, 10h58

C'était peut-être écrit trop petit...

Citation:

JavaScript est sensible à la casse !

donc

Code :

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

innerHTML != InnerHTML

andry.aime · 05/12/2011, 13h01

Une discussion qui devra intéresser

http://www.developpez.net/forums/d11...res-seffacent/.

A+.

05/12/2011, 08h04	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 789 Points : 35 789	Code : Sélectionner tout - Visualiser dans une fenêtre à part InnerHTML JavaScript est sensible à la casse ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

04/12/2011, 17h53	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, tout d'abord le code PHP ne nous est d'aucune utilité il est préférable de mettre le code HTML généré. Ceci étant pas bien compris si il s'agissait d'ajouter le même SELECT, dans ce cas il existe l'attribut multiple pour les SELECTs qui permet de récupérer plusieurs choix. Dans ta fonction on peut remarquer un document.write qui présente l'avantage d'effacer ta page lorsque celle ci est construite, à bannir donc. Enfin il est souvent préférable d'utiliser les méthodes DOM comme createElement, appendChild...
	00

04/12/2011, 18h07	#3
kelaan Invité de passage Inscription : mai 2010 Messages : 19 Détails du profil Informations forums : Inscription : mai 2010 Messages : 19 Points : 3 Points : 3	Tout d'abord, merci d'avoir pris le temps de bien vouloi m'aider, Cependant j'aimerais vous poser quelques questions quand à votre réponse. Je ne comprends pas vraiment pourquoi vous dîte que ma partie PHP ne sert à rien? Quelle partie exactement ne sert à rien? Ensuite je ne connais pas vraiment l'attribut multiple mais vais-je pouvoir récupérer en javascript les informations du select grâce à multiple, un truc comme Document.getElementById.multiple? J'ai bien compris pour le rester. Merci
	00

05/12/2011, 13h01	#9
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 139 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 139 Points : 7 276 Points : 7 276	Une discussion qui devra intéresser http://www.developpez.net/forums/d11...res-seffacent/. A+.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email