[DOM] souci de button reset

**developpeuse20** · 10/03/2009, 13h50

Bonjour au forum

J'utilise javascript sur mon code php cela fonctionne parfaitement par contre il y a un problème au niveau de ma button

Code :

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

Retablir

j'ai qautre listes deroulante

Fournisseur{}
Produit{}
Localisation{}
Client{}

voila lorsque je clique sur la button Retablir pour remetre a jour mes liste deroulante la button marche seulement sur les deux listes
Fournisseur{Aucun}
Produit{choisir un produit}
pour les deux autres ne marche pas
Localisation{toujours mes donnees restent afficher}
Client{toujours mes donnees restent afficher}

Voici l'extrait du 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Listes Liees +Module+Matiere</title>
		<script type='text/javascript'>
		<!--
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('prod').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","prod.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de Module
				sel = document.getElementById('four');
				idfour = sel.options[sel.selectedIndex].value;
 
			    xhr.send("idfour="+idfour);
 
			}
		-->
		</script>
		<!-- LA BALISE STYLE DE PREFERENCE DANS LE HEAD ET MIEUX DANS UN FICHIER EXTERNE
		<link rel="stylesheet" type="text/css" href="design.css" />
		-->
		<style type="text/css">
            body{font-family:verdana,sans-serif; font-size:11pt;color:#333333;font-weight:bold; background-color : #EEEEDD;}
             p { text-align : center; }
             #page{ width : 900px; margin : auto;}
              table{ width : 900px;}
              td {font-family:verdana,sans-serif; font-size:10pt; color:#333333; }
               select { width : 200px;}
		</style>
 
	</head>
	<!-- ATTENTION ON NE DECLARE QU UN SEUL BODY -->
	<!-- <body> -->
 
 <!--  ON NE FERME QU UNE FOIS LE HEAD -->
<!-- </head> -->
 
<body>
<!-- LA BALISE CENTER EST OBSOLETE. IL FAUT UTILISER UNE DIV EST LA CENTRER -->
<!-- <center> -->
<div id="page">
	<p>quel produits et quelle clientes voulez vous choisir?</p>
	<!-- UN FORM COMPREND AU MINIMUM UN ACTION ET UNE METHODE (ON RECUPERE AVEC $_POST sinon $_GET)  -->
	<form name="choix" action="tab.php" method="post" target="result">
		<!-- POUR UTILISER UN TABLEAU IL FAUT LE METTRE DANS DES BALISE <TABLE> -->
		<table class="centrer"> 
			<tr>
				<td>
					<label>Fournisseur :</label>
				</td>  
				<td>
					<select name="four" id="four" onchange="go()">
						<option value='-1'>Aucun</option>
 
                    <?
						mysql_connect("localhost","root","");	
                        mysql_select_db("Command");
						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nomfour");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["idfour"]."'>".$row["nomfour"]."</option>";
						}
					?>					
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<label>Produits :</label>
				</td>
				<td>
					<!-- UN DIV INLINE EST UN : SPAN -->
					<!-- <div id="prod" style="display:inline"> -->
					<span id='prod'>
						<select name='prod'>
							<option value='-1'>Choisir un produit</option>
						</select>
					</span>
				</td>
			</tr>
	        <tr>
				<td>
						<label>Localisation :</label>
				</td>
				<td>
                        <?
                       mysql_connect("localhost","root","");
                       mysql_select_db("Command");
                       $res = mysql_query("SELECT Distinct Localisation FROM client");
                       echo"<select name=\"Loc\" id=\"Loc\">";
                       while($row = mysql_fetch_assoc($res)){
                       echo "<option value='".$row["Localisation"]."'>".$row["Localisation"]."</option>";
                              }
                           echo "</select> ";	
                        ?>						   
				</td>
			</tr>
			<tr>
				<td>
					<label>Clients :</label>
				</td>
				<td>
					<!-- ON NE PEUT PAS METTRE DEUX FOIS LES MEMES IDENTIFIANTS -->
					<!--<select name="Nom" id="client">-->
 
                       <?
                          mysql_connect("localhost","root","");
                          mysql_select_db("Command");
                          $res = mysql_query("SELECT Distinct SortClt FROM client");
                          echo"<select name=\"client\" id=\"client\">";
                             while($row = mysql_fetch_assoc($res)){
                             echo "<option value='".$row["SortClt"]."'>".$row["SortClt"]."</option>";
                                }
                             echo "</select> ";
                             ?>									
				</td>
			</tr>
			<br>
			<br>
			<tr>
				<!-- PERMET DE METTRE LA COLONNE QUI PREND DEUX DOLONNES -->
				<td>
					<input type="submit" name="monBouton" value="Afficher">
				</td>
				<td>
		            <input type="reset" style="text-align: center" value ="R&eacute;tablir">
				</td>
			</tr>
	       <tr>
		<td colspan="2">
       <p><iframe name="result" src="tab.php" height="600px" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></p>
     </td>
	</tr>	
		</table>
	</form>
</div>
</body>
</html>

Comment pourrais-je corriger mo fourmualire pour que cela fonctionne correctement pour toutes mes liste?

Merci de votre aide

**E.Bzz** · 10/03/2009, 13h53

Bonjour,
il me semblait t'avoir prévenu que si tu modifiais le contenu d'un <form> via innerHTML au lieu d'utiliser les fonctions DOM, tu rencontrerais des problèmes ...

Ben tu y es

A+

**developpeuse20** · 10/03/2009, 14h31

j'ai pas bien saisie la signification

Code :

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

1
2
Bonjour,
il me semblait t'avoir prévenu que si tu modifiais le contenu d'un <form> via innerHTML au lieu d'utiliser les fonctions DOM, tu rencontrerais des problèmes ...

**SleTT** · 10/03/2009, 14h50

Je pense qu'il cherche à te dire que ta portion de code :

// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('prod').innerHTML = leselect;

n'est pas bonne pour rajoute une option à une liste

Utilise plutôt la manipulation de tes options par les outils DOM

**developpeuse20** · 10/03/2009, 14h56

merci d'avoir me repondre

comment dois-je faire please au niveau de mon code

**E.Bzz** · 10/03/2009, 14h58

Envoyé par SleTT

Je pense qu'il cherche à te dire que ta portion de code :
n'est pas bonne pour rajoute une option à une liste

Utilise plutôt la manipulation de tes options par les outils DOM

Exactement

Sauf qu'il ne s'agit pas juste d'options, mais de tout l'objet select

@developpeuse20 >

Envoyé par developpeuse20

j'ai pas bien saisie la signification

Ca, je vois bien ...

==> Rappel 1, Rappel 2

A+

**SleTT** · 10/03/2009, 15h00

Tu peux utiliser cette syntaxe :

tonselect.options[i] = new Option(intitulé,id);

"i" correspondant à l'indice ou tu souhaites ajouter la nouvelle option, le reste parle de lui même.

**E.Bzz** · 10/03/2009, 15h36

Envoyé par SleTT

Tu peux utiliser cette syntaxe :

"i" correspondant à l'indice ou tu souhaites ajouter la nouvelle option, le reste parle de lui même.

Envoyé par E.Bzz

Sauf qu'il ne s'agit pas juste d'options, mais de tout l'objet select

A+

**developpeuse20** · 10/03/2009, 17h45

j'appercie beaucoup vos interventions mais ben messieurs je suis debutante en javascript et si vous permettez d'aller pas a pas avec mon code ca sera mieux et efficace pour moi

**E.Bzz** · 10/03/2009, 17h55

Envoyé par developpeuse20

j'appercie beaucoup vos interventions mais ben messieurs je suis debutante en javascript et si vous permettez d'aller pas a pas avec mon code ca sera mieux et efficace pour moi

Oui oui, tu as tout à fait raison : il est préférable d'aller à ton rythme.

Mais quand on te dit que tu vas faire un faux pas, si tu le fais quand même, ben forcément après tu as mal à la cheville

Dans le cas présent, pour régler ce problème, relis tes discussions précédentes, et retourne voir les instructions DOM (lien déjà donné).

Ton formulaire devrait fonctionner normalement.

Et puis, débuter JavaScript en commençant par Ajax n'est pas forcément la meilleure méthode

A+

[DOM] souci de button reset

JavaScript

Discussions similaires

Partager

Partager