[AJAX] Récupérer les value de champs cachés

**francky74** · 12/03/2015, 18h27

Bonjour,

J'ai passé l'après midi sur ce problème

Je sais que c'est un peu tordu comme code mais je vais essayer de clarifier au max les étapes :

1-je clique sur une ligne d'un tableau parmis deux (générés en php), ce clic déclenche un onclick="remplichamps(\'entreprises\', (this.id), this);" ou onclick="remplichamps(\'personnes\', (this.id), this);"
2-La fonction remplichamps(type, id, obj) insère des valeurs dans ds champs cachés (qui ont été créés au départ en html)
3-si je clique sur le bouton Valider, cela lance la fonction validerModif()
4-la fonction validerModif() récupère les valeurs des champs cachés pour les donner à valididentite.php grâce à la méthode GET.

Je souhaite, lors du clic sur un bouton "Valider" afficher dans un tableau, des valeurs présentes dans des champs cachés.
Le clic sur le bouton "Validation" déclenche un "onclic="validerModif()" qui est le script js suivant :

Code javascript :

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
//VALIDER l'identité
function validerModif(){
	  if (window.XMLHttpRequest) {
		    // code for IE7+, Firefox, Chrome, Opera, Safari
		    xmlhttp=new XMLHttpRequest();
		  } else {  // code for IE6, IE5
		    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	  xmlhttp.onreadystatechange=function(){
		    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		      document.getElementById("hgauche").innerHTML = xmlhttp.responseText;
		    }
		}
 
	if (document.getElementById('hidnom').value != ""){
		req = '?sexe=' + document.getElementById('hidsexe').value;
		req += '&nom=' + document.getElementById('hidnom').value;
		req += '&prenom=' + document.getElementById('hidprenom').value;
		req += '&datenaiss=' + document.getElementById('hiddatenaiss').value;
		req += '&communenaiss=' + document.getElementById('hidcommunenaiss').value;
		req += '&deptnaiss=' + document.getElementById('hiddeptnaiss').value;
	}
	else{
		req = '?designation=' + document.getElementById('hiddesignation').value;
		req += '&siret=' + document.getElementById('hidsiret').value;
		req += '&statut=' + document.getElementById('hidstatut').value;
		req += '&sexerep=' + document.getElementById('hidsexerep').value;
		req += '&nomrep=' + document.getElementById('hidnomrep').value;
		req += '&prenomrep=' + document.getElementById('hidprenomrep').value;
		req += '&nom=';
	}
 
xmlhttp.open("GET", "valididentite.php" + req, true);
xmlhttp.send();
}

et donc ce script renvoie vers le page valididentite.php suivante :

Code php :

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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<?php
try{
	$bdd = new PDO('mysql:host=localhost;dbname=bdd;charset=utf8', 'root', 'rrrr');
}
catch (Exception $e){
	die('Erreur : ' . $e->getMessage());
}
 
$reponsetypevoie = $bdd->query('SELECT typevoie_type FROM type_voie ORDER BY typevoie_type ASC');
$reponsepays = $bdd->query('SELECT pays_nom FROM pays ORDER BY pays_nom ASC');
 
if ($_REQUEST['nom'] != ""){
	$nom = $_REQUEST['nom'];
	$prenom = $_REQUEST['prenom'];
	$datenaiss = $_REQUEST['datenaiss'];
	$communenaiss = $_REQUEST['communenaiss'];
	$deptnaiss = $_REQUEST['deptnaiss'];
 
echo '
	<h1 class="titles">Coordonnées du demandeur</h1>
	<div id="choixidentite">
		<label for="tabpers">Demandeur :</label>
		<table id="tabpers">
			<tr>
				<th>Nom</th>
				<th>Prénoms</th>
				<th>Date naiss</th>
				<th>Commune naiss</th>
				<th>Dépt naissance</th>
			</tr>
			<tr>
				<td>'.$nom.'</td>
				<td>'.$prenom.'</td>
				<td>'.$datenaiss.'</td>
				<td>'.$communenaiss.'</td>
				<td>'.$deptnaiss.'</td>
			</tr>
		</table>
	</div>
	<div id="divpersh">	
		<label for="num">numéro* :</label>
		<input type="text" id="num" name="num" value=""/>
						
		<label for="typevoie">type voie* :</label>
		<select id="typevoie">';
			while($donnees = $reponsetypevoie->fetch()){
					echo '
						<option id="'.$donnees['typevoie_type'].'">'.$donnees['typevoie_type'].'</option>
					';
				}
				$reponsetypevoie->closeCursor();
		echo '
		</select>
						
		<label for="num">nom voie* :</label>
		<input type="text" id="nomvoie" name="nomvoie" value=""/>
						
		<label for="pays">pays :</label>
		<select id="pays">';
		while($donnees = $reponsepays->fetch()){
				echo '
					<option id="'.$donnees['pays_nom'].'">'.$donnees['pays_nom'].'</option>
				';
			}
			$reponsepays->closeCursor();
	echo '
	</select>
	
	<br/><br/>
					
	<label for="lieudit">lieu dit :</label>
	<input type="text" id="lieudit" name="lieudit" value=""/>
					
	<label for="localite">localite* :</label>
	<input type="text" id="localite" name="localite" value=""/>
					
	<label for="CP">code postal* :</label>
	<input type="text" id="CP" name="CP" value=""/>
					
	<label for="BP">boite postale :</label>
	<input type="text" id="BP" name="BP" value=""/>
					
	<label for="cedex">cedex :</label>
	<input type="text" id="cedex" name="cedex" value=""/>
	
	<br/><br/>
	
	<label for="choixautrepersphy">Adresser les courriers à une autre personne : physique </label>
	<input type="radio" id="choixautrepersphy" name="choixautrepers" value="phy" onclick="getAutrePers(this.value)"/>
			
	<label for="choixautrepersmor">morale : </label>
	<input type="radio" id="choixautrepersmor" name="choixautrepers" value="mor" onclick="getAutrePers(this.value)"/>
	
	<br/><br/>
	<div id="choixautrepers">
	</div>
</div>
<div id="listepers">
					listepers
</div>
<div id="boutonsidentite" class="boutons">

	<button type="button" value="valider" id="valider" onmouseup="validerModif();">VALIDER</button>
	<button type="button" value="effacer" id="effacer" onmouseup="effacerModif(false);">EFFACER</button>
	<button type="button" value="ajouter" id="ajouter" onmouseup="annulerModif();">ANNULER</button>
	<br/><br/>
</div>
';
}
else{
	$designation = $_REQUEST['designation'] ;
	$siret = $_REQUEST['siret'];
	$statut = $_REQUEST['statut'];
	$nomrep = $_REQUEST['nomrep'];
	$prenomrep = $_REQUEST['prenomrep'];
 
 
	echo '
	<h1 class="titles">Coordonnées du demandeur</h1>
	<div id="choixidentite">
		<label for="tabmor">Demandeur :</label>
		<table id="tabmor">
			<tr>
				<th>Désignation</th>
				<th>SIRET</th>
				<th>Statut</th>
				<th>Nom représentant</th>
				<th>Prénom représentant</th>
			</tr>
			<tr>
				<td>'.$designation.'</td>
				<td>'.$siret.'</td>
				<td>'.$statut.'</td>
				<td>'.$nomrep.'</td>
				<td>'.$prenomrep.'</td>
			</tr>
		</table>
	</div>
	<div id="divpersh">
		<label for="num">numéro* :</label>
		<input type="text" id="num" name="num" value=""/>
	
		<label for="typevoie">type voie* :</label>
		<select id="typevoie">';
	while($donnees = $reponsetypevoie->fetch()){
		echo '
						<option id="'.$donnees['typevoie_type'].'">'.$donnees['typevoie_type'].'</option>
					';
	}
	$reponsetypevoie->closeCursor();
	echo '
		</select>
	
		<label for="num">nom voie* :</label>
		<input type="text" id="nomvoie" name="nomvoie" value=""/>
	
		<label for="pays">pays :</label>
		<select id="pays">';
	while($donnees = $reponsepays->fetch()){
		echo '
					<option id="'.$donnees['pays_nom'].'">'.$donnees['pays_nom'].'</option>
				';
	}
	$reponsepays->closeCursor();
	echo '
	</select>
	
	<br/><br/>
			
	<label for="lieudit">lieu dit :</label>
	<input type="text" id="lieudit" name="lieudit" value=""/>
			
	<label for="localite">localite* :</label>
	<input type="text" id="localite" name="localite" value=""/>
			
	<label for="CP">code postal* :</label>
	<input type="text" id="CP" name="CP" value=""/>
			
	<label for="BP">boite postale :</label>
	<input type="text" id="BP" name="BP" value=""/>
			
	<label for="cedex">cedex :</label>
	<input type="text" id="cedex" name="cedex" value=""/>
	
	<br/><br/>
	
	<label for="choixautrepersphy">Adresser les courriers à une autre personne : physique </label>
	<input type="radio" id="choixautrepersphy" name="choixautrepers" value="phy" onclick="getAutrePers(this.value)"/>
		
	<label for="choixautrepersmor">morale : </label>
	<input type="radio" id="choixautrepersmor" name="choixautrepers" value="mor" onclick="getAutrePers(this.value)"/>
	
	<br/><br/>
	<div id="choixautrepers">
	</div>
</div>
<div id="listepers">
					listepers
</div>
<div id="boutonsidentite" class="boutons">
	
	<button type="button" value="valider" id="valider" onmouseup="validerModif();">VALIDER</button>
	<button type="button" value="effacer" id="effacer" onmouseup="effacerModif(false);">EFFACER</button>
	<button type="button" value="ajouter" id="ajouter" onmouseup="annulerModif();">ANNULER</button>
	<br/><br/>
</div>
';	
}
?>

Dans le script "validerModif()", on voit des getElementById().value -> ces fonctions reprennent la valeur de champs cachés que j'ai créés dans ma page en html (je ne voulais pas les générer en php car je découvre que la génération de balises html avec du php pose des problèmes pour récupérer les value ...

les champs cachés sont créés au début en html comme ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="hidden" id="hidsexe" value="">
<input type="hidden" id="hidnom" value="">
<input type="hidden" id="hidprenom" value="">
<input type="hidden" id="hiddatenaiss" value="">
<input type="hidden" id="hidcommunenaiss" value="">
<input type="hidden" id="hiddeptnaiss" value="">
 
<input type="hidden" id="hiddesignation" value="">
<input type="hidden" id="hidsiret" value="">
<input type="hidden" id="hidstatut" value="">
<input type="hidden" id="hidsexerep" value="">
<input type="hidden" id="hidnomrep" value="">
<input type="hidden" id="hidprenomrep" value="">

et les values de ces champs cachés sont remplies lorsque je clique sur une ligne d'un tableau (dont les balises ont été créées en php) :

partie génération ligne tableau :

Code php :

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

1
2
3
4
5
6
7
8
9
10
while($donnees = $reponse->fetch()){
	echo '
	<tr id="'.$donnees['ent_id'].'" onclick="remplichamps(\'entreprises\', (this.id), this);">
		<td>'.$donnees['ent_nom'].'</td>
		<td>'.$donnees['ent_siret'].'</td>
		<td>'.$donnees['ent_statut'].'</td>
		<td>'.$donnees['pers_nom'].'</td>
		<td>'.$donnees['pers_prenom'].'</td>
	</tr>';
}

script appelé lors du clic sur une ligne du tableau :

Code javascript :

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
174
175
176
177
//click sur une ligne du tableau des particuliers ou des entreprises pour remplir les champs et les hidden champs
function remplichamps(type, id, obj){
	if (type == "personnes"){
	  if (window.XMLHttpRequest) {
		    // code for IE7+, Firefox, Chrome, Opera, Safari
		    xmlhttp=new XMLHttpRequest();
		    xmlhttp2=new XMLHttpRequest();
		    xmlhttp3=new XMLHttpRequest();
		    xmlhttp4=new XMLHttpRequest();
		    xmlhttp5=new XMLHttpRequest();
		    xmlhttp6=new XMLHttpRequest();
		    xmlhttp7=new XMLHttpRequest();
	  } else {  // code for IE6, IE5
		    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp4=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp5=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp6=new ActiveXObject("Microsoft.XMLHTTP");
		    xmlhttp7=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  /////////////////////////////////////////////////////////////////
	  xmlhttp.onreadystatechange=function(){
		    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		      document.getElementById("divpersh").innerHTML = xmlhttp.responseText;
		    }
		}
 
		  xmlhttp.open("GET","affichchamps.php?id="+ id + "&type=" + type,true);
		  xmlhttp.send();
		//////////////////////////////////////////////////////////// 
	  xmlhttp2.onreadystatechange=function(){
		    if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
		      document.getElementById("hidsexe").value = xmlhttp2.responseText;
		    }
		}
	  xmlhttp2.open("GET", "remplihidsexeparticulier.php?id=" + id, true);
	  xmlhttp2.send();
	  ///////////////////////////////////////////////////////////////////////////////
	  xmlhttp3.onreadystatechange=function(){
		    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
		      document.getElementById("hidnom").value = xmlhttp3.responseText;
		    }
		}
 
	  xmlhttp3.open("GET","remplihidnomparticulier.php?id="+ id,true);
	  xmlhttp3.send();
 
	  ///////////////////////////////////////////////////////////////////////////////
	  xmlhttp4.onreadystatechange=function(){
		    if (xmlhttp4.readyState==4 && xmlhttp4.status==200) {
		      document.getElementById("hidprenom").value = xmlhttp4.responseText;
		    }
		}
 
	  xmlhttp4.open("GET","remplihidprenomparticulier.php?id="+ id,true);
	  xmlhttp4.send();
 
	  ///////////////////////////////////////////////////////////////////////////////
	  xmlhttp5.onreadystatechange=function(){
		    if (xmlhttp5.readyState==4 && xmlhttp5.status==200) {
		      document.getElementById("hiddatenaiss").value = xmlhttp5.responseText;
		    }
		}
 
	  xmlhttp5.open("GET","remplihiddatenaissparticulier.php?id="+ id,true);
	  xmlhttp5.send();
 
	  ///////////////////////////////////////////////////////////////////////////////
	  xmlhttp6.onreadystatechange=function(){
		    if (xmlhttp6.readyState==4 && xmlhttp6.status==200) {
		      document.getElementById("hidcommunenaiss").value = xmlhttp6.responseText;
		    }
		}
 
	  xmlhttp6.open("GET","remplihidcommunenaissparticulier.php?id="+ id,true);
	  xmlhttp6.send();
 
	  ///////////////////////////////////////////////////////////////////////////////
	  xmlhttp7.onreadystatechange=function(){
		    if (xmlhttp7.readyState==4 && xmlhttp7.status==200) {
		      document.getElementById("hiddeptnaiss").value = xmlhttp7.responseText;
		    }
		}
 
		  xmlhttp7.open("GET","remplihiddeptnaissparticulier.php?id="+ id,true);
		  xmlhttp7.send();
 
	}
 
	if (type == "entreprises"){
		  if (window.XMLHttpRequest) {
			    // code for IE7+, Firefox, Chrome, Opera, Safari
			    xmlhttp=new XMLHttpRequest();
			    xmlhttp2=new XMLHttpRequest();
			    xmlhttp3=new XMLHttpRequest();
			    xmlhttp4=new XMLHttpRequest();
			    xmlhttp5=new XMLHttpRequest();
			    xmlhttp6=new XMLHttpRequest();
			    xmlhttp7=new XMLHttpRequest();
		  } else {  // code for IE6, IE5
			    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp4=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp5=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp6=new ActiveXObject("Microsoft.XMLHTTP");
			    xmlhttp7=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		  /////////////////////////////////////////////////////////////////
		  xmlhttp.onreadystatechange=function(){
			    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			      document.getElementById("divpersh").innerHTML = xmlhttp.responseText;
			    }
			}
 
			  xmlhttp.open("GET","affichchamps.php?id="+ id + "&type=" + type,true);
			  xmlhttp.send();
			//////////////////////////////////////////////////////////// 
		  xmlhttp2.onreadystatechange=function(){
			    if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
			      document.getElementById("hiddesignation").value = xmlhttp2.responseText;
			    }
			}
		  xmlhttp2.open("GET", "remplihiddesignation.php?id=" + id, true);
		  xmlhttp2.send();
		  ///////////////////////////////////////////////////////////////////////////////
		  xmlhttp3.onreadystatechange=function(){
			    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
			      document.getElementById("hidsiret").value = xmlhttp3.responseText;
			    }
			}
 
		  xmlhttp3.open("GET","remplihidsiret.php?id="+ id,true);
		  xmlhttp3.send();
 
		  ///////////////////////////////////////////////////////////////////////////////
		  xmlhttp4.onreadystatechange=function(){
			    if (xmlhttp4.readyState==4 && xmlhttp4.status==200) {
			      document.getElementById("hidstatut").value = xmlhttp4.responseText;
			    }
			}
 
		  xmlhttp4.open("GET","remplihidstatut.php?id="+ id,true);
		  xmlhttp4.send();
 
		  ///////////////////////////////////////////////////////////////////////////////
		  xmlhttp5.onreadystatechange=function(){
			    if (xmlhttp5.readyState==4 && xmlhttp5.status==200) {
			      document.getElementById("hidsexerep").value = xmlhttp5.responseText;
			    }
			}
 
		  xmlhttp5.open("GET","remplihidsexerep.php?id="+ id,true);
		  xmlhttp5.send();
 
		  ///////////////////////////////////////////////////////////////////////////////
		  xmlhttp6.onreadystatechange=function(){
			    if (xmlhttp6.readyState==4 && xmlhttp6.status==200) {
			      document.getElementById("hidnomrep").value = xmlhttp6.responseText;
			    }
			}
 
		  xmlhttp6.open("GET","remplihidnomrep.php?id="+ id,true);
		  xmlhttp6.send();
 
		  ///////////////////////////////////////////////////////////////////////////////
		  xmlhttp7.onreadystatechange=function(){
			    if (xmlhttp7.readyState==4 && xmlhttp7.status==200) {
			      document.getElementById("hidprenomrep").value = xmlhttp7.responseText;
			    }
			}
 
			  xmlhttp7.open("GET","remplihidprenomrep.php?id="+ id,true);
			  xmlhttp7.send();
	}
}

insertion d'une value dans un champs caché nommé hidprenomrep "remplihidprenomrep.php":

Code php :

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
<?php 
$ident = $_REQUEST['id'];
try{
	$bdd = new PDO('mysql:host=localhost;dbname=bdd;charset=utf8', 'root', 'rrrr');
}
catch (Exception $e){
	die('Erreur : ' . $e->getMessage());
}
 
$reponse = $bdd->query('SELECT pers_prenom
		FROM personnes, gerer, entreprises
		WHERE entreprises.ent_nom = '.$ident.'
		AND gerer.personnes_pers_id = personnes.pers_id
		AND gerer.entreprises_ent_id = entreprises.ent_id
		');
 
while($donnees = $reponse->fetch()){
	echo $donnees['pers_prenom'];
}
 
?>

Je vous remercie de me lire jusqu'ici ... demandez des renseignements si vous voulez.

[AJAX] Récupérer les value de champs cachés

AJAX

Mode arborescent

Discussions similaires

Partager

Partager