Afficher liste déroulante PHP [Résolu]

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

Citation:

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>

Citation:

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. =)

22/03/2011, 12h18	#2
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	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; __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

22/03/2011, 13h41	#4
Super_carotte Nouveau Membre du Club Benjamin Étudiant Inscription : mai 2010 Messages : 148 Détails du profil Informations personnelles : Nom : Benjamin Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2010 Messages : 148 Points : 36 Points : 36	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. =)
	00

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