Afficher liste déroulante PHP

**Super_carotte** · 22/03/2011, 11h15

Bonjour a tous.

Je suis en train de me former au JS/PHP/HTML.

Pour cela, je "m'amuse" a créer une page qui permette:
De choisir dans une liste déroulante un nom d'équipe parmis plusieurs nom.
Ces noms sont récupérés sur une BDD.
ça, ça merche. Ma liste déroulante est bien remplie.

Ce que je cherche a faire maintenant, c'est pourvoir ajouter autant de liste déroulante de choix de nom d'équipe que le souhaite l'utilisateur.
Le but: en cliquant sur un simple lien, l'utilisateur doit voir s'afficher une nouvelle liste déroulante sur sa page.

J'ai pas mal avancé et j'ai réussi a faire fonctionner ça mais avec un simple champ texte.
Quand j'essai de "dupliquer" ma liste déroulante, la, je n'y arrive pas.
Le probleme vien surement de la ligne 'div.innerHTML' dans la partie script de JS.

Voici 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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head>
<title>Test javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
body {
	background-color: #F0F0F0;
	color: black;
}
input[type=text] {
	border: 1px solid #C7C7C7;
	width: 150px;
	color: green;
	margin: 2px;
}
input[type=text]:hover {
	border: 1px solid black;
	width: 150px;
	color: green;
	background-color: #FFEEFF;
	margin: 2px;
}
</style>
<script type="text/javascript">
 
function add_equipe()
{ 
//nombreEquipe = document.getElementById('select').value;
 
	var div = document.createElement('div');
 
// JE PENSE QUE LE PROBLEME VIENT DE LA LIGNE SUIVANTE:
		//div.innerHTML = '<input type="text" name="responses[]" /><button onclick="remove_equipe(this)">Supprimer</button>';
		  div.innerHTML = '<<?php print $ld; ?> name="responses[]" /><button onclick="remove_equipe(this)">Supprimer</button></div>';
 
 
	var parent = document.getElementById('responses_block');
	parent.appendChild(div);
}
 
 
function remove_equipe(elem)
{
	var child = elem.parentNode;
	var parent = child.parentNode;
 
	parent.removeChild(child);
}
 
</script>
<?php
   // INFO POUR LA BDD
$login = 'mon_log';
$mdp = 'mon_pass';
 
// Pour Oracle
$bdd = 'oci:dbname=ma_bdd';
 
//CONNEXION BDD
try {
$cnx = new PDO($bdd, $login, $mdp);
}
 
catch (PDOException $error) {
die("Erreur de connexion : " . $error->getMessage() );
}
 
// Requête avec renvoi de résultat(s)
$req = "SELECT DISTINCT (nom_equipe)
FROM equipe";
$res = $cnx->query($req) or die( "Exécution requête impossible.");
 
 
//Création d'une liste déroulante avec donnée récupérées de la BDD
 
$ld = "<SELECT NAME='responses[]'>";
$ld .= "<OPTION VALUE=0>Choisissez</OPTION>";
// On boucle sur la table
while ($row = $res->fetch(PDO::FETCH_ASSOC)){
  $OptCritere1 = $row["CLY_EQUIPEGESTIONNAIRE"]; 
  $ld .= "<OPTION VALUE='$OptCritere1'>$OptCritere1</OPTION>";
}
$ld .= "</SELECT>";
 
$cnx = null; // Fermeture de la connexion
 
 
?>
 
 
</head>
<body>
 
<a href="index.php">index</a>
<br><br>
 
<?php
//Exemple d'Affichage de la liste déroulante qui fonctionne
print $ld;
?>
<!--Voici mon formulaire qui affiche  ma premiere liste deroulante. Le bouton supprime fonctionne aussi. c est le lien ajouter une equipe qui ne fonctionne pas.-->
<form id="ajoutEquipe" method="post"  action="form">
	<table style="margin: 0 auto 0 auto; width: 850px" class="form" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td class="label">Equipe :<br /><a href="#" style="font-size: 10px" onclick="add_equipe()">Ajouter une equipe</a></td>
			<td class="value" id="responses_block">
				<div><?php print $ld; ?><button onclick="remove_equipe(this)">Supprimer</button></div>
			</td>
 
		</tr>
	</table>
</form>	
 
 
 
 
 
</body>
</html>

Merci pour votre aide

**javatwister** · 22/03/2011, 12h18

si tu veux un DOM propre, renonce dès maintenant à innerHTML, qui ne produira que du caca;

et merci de ne poster que du html / javascript;

**Super_carotte** · 22/03/2011, 12h35

et merci de ne poster que du html / javascript;

Alors j'ai modifier un peu le code pur qu'il y ai le moins possible de PHP afin que vous puissiez me comprendre.

Voici ma nouvelle page:

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
<html>
<head>
<title>Test javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
body {
	background-color: #F0F0F0;
	color: black;
}
input[type=text] {
	border: 1px solid #C7C7C7;
	width: 150px;
	color: green;
	margin: 2px;
}
input[type=text]:hover {
	border: 1px solid black;
	width: 150px;
	color: green;
	background-color: #FFEEFF;
	margin: 2px;
}
</style>
<script type="text/javascript">
 
function add_equipe()
{ 
//nombreEquipe = document.getElementById('select').value;
 
	var div = document.createElement('div');
 
		//div.innerHTML = '<input type="text" name="responses[]" /><button onclick="remove_equipe(this)">Supprimer</button>';
		 // div.innerHTML = '<SELECT name="nom" size="1"><OPTION>lundi<OPTION>mardi<OPTION>mercredi<OPTION>jeudi<OPTION>vendredi</SELECT><button onclick="remove_equipe(this)">Supprimer</button>';
 
		  div.innerHTML = '<?php print ($ld); ?><button onclick="remove_equipe(this)">Supprimer</button>';
 
 
	var parent = document.getElementById('responses_block');
	parent.appendChild(div);
}
 
 
function remove_equipe(elem)
{
	var child = elem.parentNode;
	var parent = child.parentNode;
 
	parent.removeChild(child);
}
 
</script>
 
 
</head>
<body>
 
<a href="index.php">index</a>
<br><br>
 
 
 
 
 
AFFICHAGE MODE PHP
 <form id="ajoutEquipePHP" method="post">
	<table style="margin: 0 auto 0 auto; width: 850px" class="form" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td class="label">Equipe :<br /><a href="#" style="font-size: 10px" onclick="add_equipe()">Ajouter une equipe</a></td>
			<td class="value" id="responses_block">
				<div> 
					 <?php
                                         $ld = "<select name='mon_champ'>    <option>Option 1</option>   <option>Option 2</option>  <option>Option 3</option> </select>";
                                         print $ld;
                                         ?>
				<button onclick="remove_equipe(this)">Supprimer</button>
				</div>
			</td>
 
		</tr>
	</table>
</form>	
 
 
 
</body>
</html>

si tu veux un DOM propre, renonce dès maintenant à innerHTML, qui ne produira que du caca;

Alors je crois qu'un dom (d'apres ce que j'ai compris) est l'affichage de mes navigateurs. Donc le innerHTML me ferai un mauvais affichage c'est ça?
Auriez vous une solution pour que dans mon javascript je puisse faire afficher une liste déroulante créée par du PHP?

Merci a vous.

**Super_carotte** · 22/03/2011, 13h41

Probleme trouvé:
La ligne correcte pour le innerHTML est (dans mon cas):

Code :

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

div.innerHTML = "<?php print "$ld"; ?><button onclick=\"remove_equipe(this)\">Supprimer</button>";

Merci a vous. =)

Afficher liste déroulante PHP

JavaScript

Discussions similaires

Partager

Partager