[AJAX] Transformer un chargement par validation en chargement dynamique

**francois_a** · 07/09/2009, 23h54

Bonjour,

Actuellement, je fais un site qui me permet de remplir une base de données MySQL. Bref, 90% de page de formulaire.

Pour modifier les informations d'un membre par exemple, je vais chercher dans ma base la liste des membres. J'affiche le tout dans un <Select> et pour obtenir les informations sur ce membre (et les modifier) je dois cliquer sur un bouton pour recharger ma page.

J'aimerai le faire dynamiquement mais çà ne fonctionne pas. En fait je n'arrive pas à voir comment renvoyer juste des tableaux de variables. Bon avec le script çà serai plus parlant mais il fait 500 lignes sans compter les annexes !

Mon JavaScript :

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
 
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;
}
 
function maj(){
	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){
			ladate = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('test').innerHTML = ladate;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","majm.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// On recupere l'ID
	memb = document.getElementById('membre');
	idmemb = memb.options[memb.selectedIndex].value;
	xhr.send("membre="+idmemb);
 
	}

Code PHP :

Code :

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

1
2
3
4
5
6
7
<?php
include "membre.php";
 
if (isset($_POST['membre'])) {
                $tableau = recup($_POST['membre']); $tableau2 = recup2($_POST['membre']); $tableauR = recupR($_POST['membre']);  modifier(); }
 
?>

HTML

Code :

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

1
2
3
4
5
6
7
<fieldset><legend>$nom</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange='maj();
 
...
<fieldset name="test" id="test" >
<label>Nom</label><span class="c2">*</span> : <input type="text" name="nom"  value="<?php echo $tableau['Nom_Pers']; ?>"/>
 
...

Bon je suis pas sur que ce soit suffisant

Merci d'avance

**E.Bzz** · 08/09/2009, 10h36

Bonjour,

Envoyé par francois_a

J'aimerai le faire dynamiquement mais çà ne fonctionne pas. En fait je n'arrive pas à voir comment renvoyer juste des tableaux de variables.

C'est peut être parce que tu essayes de reproduire le fonctionnement d'un formulaire via Ajax ...

Or la logique de fonctionnement n'est pas la même : pour afficher les informations, je suppose que tu ne vas pas changer ce qui existe (toutes les zones devant être mises à jour, un rechargement est justifié).
Par contre, pour les mises à jour de la base, il n'y a pas besoin d'envoyer la totalité des infos : sur chaque champ (onchange), il te suffit d'envoyer au serveur l'identifiant du membre, la référence de la rubrique ainsi que la nouvelle valeur, et de récupérer la réponse, qui sera "OK" ou "KO" (avec dans ce cas, le code+message d'erreur justifiant le KO).

La partie Ajax devient alors tout à fait "basique"

A+

**francois_a** · 08/09/2009, 14h03

Si je te suis bien, Ajax "ne sert que" pour recharger des bouts de page ?

Est-il possible alors, de faire en sorte que ma page se recharge à chaque changement de mon select. En gros, je souhaite vraiment retirer se bouton de validation.

J'ai pensé à un truc dans ce genre là :

Code :

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

echo "<fieldset><legend>$nom</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange='<?php $tableau = recup($_POST['membre']); $tableau2 = recup2($_POST['membre']); $tableauR = recupR($_POST['membre']);  modifier(); ?>' >";

ou pour plus de lisibilité comme ceci :

Code :

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

echo "<fieldset><legend>$nom</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange=<?php test($_POST['membre']); ?> >";

le php :

Code :

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

1
2
3
4
function test($num)
{
	$tableau = recup($num); $tableau2 = recup2($num); $tableauR = recupR($num);  modifier(); 
}

Mais bien sur çà ne fonctionne pas... Si tu as une solution das ce genre, je suis preneur

**E.Bzz** · 08/09/2009, 14h17

Envoyé par francois_a

Est-il possible alors, de faire en sorte que ma page se recharge à chaque changement de mon select. En gros, je souhaite vraiment retirer se bouton de validation.

Tel que tu le demandes, il suffit de

Code :

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

<select .... onchange="self.location.reload();">

Mais je ne suis pas sûr que ça te suffise

EDIT : ou

Code :

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

<select ..... onchange="this.form.submit();">

A+

**francois_a** · 08/09/2009, 14h58

Oui je pense que çà devrait être quelque chose dans ce genre.

Mon code fonctionne comme ceci :
Si la valeur dans $_Get['s']==2 alors c'est une modification
Si $_POST['OK'] existe alors récupérer les valeurs dans un tableau via des fonction PHP en utilisant la valeur de mon select comme ID

Bon je ne pense pas avoir les connaissances nécessaire en JavaScript... Je me lance quand même.

JavaScript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function maj(idmem)
{
// J'attribue une valeur à mon $_Post['OK']
document.setElementById('OK').value = "OK";
 
// Je recupère la valeur de mon membre (valeur de la ligne de mon Select)
membre = document.getElementById('membre').value;
 
// lancer ma fonction test(membre)
// dans ce cas je mets mon code php dans une page et non une fonction
xhr.open("POST","test.php",true);
xhr.send("membre="+membre);
}

Est ce que le code te parait correct ?

**E.Bzz** · 08/09/2009, 15h00

Envoyé par francois_a

Est ce que le code te parait correct ?

Heu ... je croyais que tu étais finalement parti sur un rechargement de la page ?

Plus besoin d'Ajax ...

EDIT : correction :

Code :

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

document.getElementById('OK').value = "OK";

même pour définir un .value

A+

**francois_a** · 08/09/2009, 15h14

Envoyé par E.Bzz

Heu ... je croyais que tu étais finalement parti sur un rechargement de la page ?

Plus besoin d'Ajax ...

EDIT : correction :

Code :

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

document.getElementById('OK').value = "OK";

même pour définir un .value

A+

Oui exact, je vire l'Ajax... j'ai un peu de mal ce matin !

ok pour le Get

Bon j'ai essayé ce code :

Code :

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

1
2
3
4
5
function maj(){
	document.getElementById('OK').value = "OK";
	this.form.submit();
 
	}

et ce code :

Code :

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

1
2
3
4
5
function maj(){
	document.getElementById('OK').value = "OK";
	self.location.reload();
 
	}

Avec ce code HTML :

Code :

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

<fieldset><legend>$nom</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange='maj();' >

Mais çà ne fonctionne pas...

**E.Bzz** · 08/09/2009, 15h17

Pour envoyer les données au serveur, c'est la 1°

Mais "ça ne fonctionne pas" n'est pas une information suffisante pour t'aider

Qu'est-ce que tu obtiens ? Sur le client ? Sur le serveur ?
Bref ... précise ...

A+

**francois_a** · 08/09/2009, 15h26

Le problème, c'est que mon navigateur ne bronche pas quand je change mon select.

j'ai regardé le code source... rien pas d'erreur afficher non plus...

**francois_a** · 08/09/2009, 15h31

Le problème vient peut etre du fait que je ne recharge pas la page avec une URL du type :

http://127.0.0.1/Site/membre.php?s=2

J'ai essayé de mettre cette ligne dans mon code :

Code :

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

window.location.replace("http://127.0.0.1/Site/membre.php?s=2");

Mais pareil ma page ne se recharge pas !

**E.Bzz** · 08/09/2009, 15h35

Envoyé par francois_a

j'ai regardé le code source... rien pas d'erreur afficher non plus...

Les erreurs ne s'affichent pas dans le code source, mais dans la fenêtre du nav (barre d'état ou autre) ....

Envoyé par francois_a

Le problème, c'est que mon navigateur ne bronche pas quand je change mon select.

Vu l'orientation que tu as pris (rechargement au lieu d'Ajax), ton select doit être dans un form pour envoyer les données au serveur

Est-ce bien le cas ?

A+

**francois_a** · 08/09/2009, 15h48

Quand je dis que je ne suis pas encore bien réveillé... Bien sur que JavaScript doit me renvoyer des erreur dans le navigateur puisque c'est le navigateur qui exécute le code...

J'ai vérifié, j'ai bien mes balises de formulaire qui apparaissent dans mon code source.

**E.Bzz** · 08/09/2009, 16h04

En POST, ton s=2 ne sera pas pris en compte.
Ton problème vient peut-être de là ?
Il faut que tu fasses comme pour ton "OK"

Sinon, on pourra voir ton code généré complet (HTML + JavaScript) ?

A+

**francois_a** · 08/09/2009, 16h24

Pas de problème pour mon code mais il y a 500 Lignes juste pour ma page membre.php

Aprés un peu de ménage :

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
174
175
176
177
178
179
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Gestion Site - Membre</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
 
			<script type='text/JavaScript'>
function affCache(idDiv) {
	var div = document.getElementById(idDiv);
	if (div.style.display == "")
	div.style.display = "none";
	else
	div.style.display = "";
	}
 
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 à la selection d'un séjour
			*/
function go(){
	//Récup les informations demander en mode text dès qu'elles sont arrivées
	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){
			ladate = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('date1').innerHTML = ladate;
		}
	}
 
	xhr.open("POST","oAjax.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 l'auteur
	resp = document.getElementById('responsable');
	idresp = resp.options[resp.selectedIndex].value;
	xhr.send("responsable="+idresp);
}
 
			/**
			* Méthode qui sera appelée à la selection d'un séjour
			*/			
function maj(){
	document.getElementById('OK').value = "OK";
	document.getElementById('s').value = "2";
	this.form.submit();
 
	}
 
			</script>
 
		<script type="text/javascript" src="calendarDateInput.js"></script>
 
   </head>
 
   <body>
 
 
          <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
 
       <div id="menu">        
           <div class="element_menu">
		   		<DIV ID=mv2></DIV>
				<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert2.js"></SCRIPT>
           </div>        
       </div>
 
       <!-- Le corps -->
       <div id="corps"> 
 
           <h1>Gestion Site - Membre</h1>
 
 
           <p>
		   <!-- Selection de l'action -->
<INPUT TYPE=RADIO NAME="choix" VALUE='1'  onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=1");' />Ajouter
<INPUT TYPE=RADIO NAME="choix" VALUE='2' checked onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=2");' />Modifier
<INPUT TYPE=RADIO NAME="choix" VALUE='3'  onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=3");' />Supprimer
 
<form name="formulaire" action="/Site/membre.php?s=2" method="post"><fieldset><legend>Modification</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange='maj();' ><option  value=1>toto toto</option><option  value=2>titi titi</option><option  value=3>test testu</option></select></td><td><input type="submit" name="OK" value="OK"></td></table></fieldset> 
					<fieldset name="test" id="test" >
						<legend>Données Personnelles</legend>
 
							<label>Intitulé </label> : <select name="intitule" id="intitule">
														<option value="M." selected >M.</option>
														<option value="Mme">Mme</option>
														<option value="Mle">Mle</option>
													</select>
							<label>Nom</label><span class="c2">*</span> : <input type="text" name="nom"  value="titi"/>
 
							<label>Prénom</label><span class="c2">*</span> : <input type="text" name="prenom"  value="titi" /><br />
						<table>
					<tr><td><label>Date de Naissance </label> :</td><td> <script>DateInput('dateN', true, 'YYYY-MM-DD','2009-09-07' )</script></td>
 
							<td><label>Nationalité </label> : <select name="pays" class="pays" ><option  value=163 selected >Polska</option><option   >----------</option><option  value=1>Afghanestan</option><option  value=2>Albania</option><option  value=3>Algeria</option><option  value=4>American Samoa</option><option  value=5>Andorre</option><option  value=6>Angola</option><option  value=7>Anguilla</option><option  value=8>Antarctica</option><option  value=9>Antigua and Barbuda</option><option  value=10>Argentina</option><option  value=11>Armenia - Hayastan</option><option  value=12>Aruba</option><option  value=13>Australia</option><option  value=14>Azerbaycan</option><option  value=15>Bahamas</option><option  value=16>Bahrayn</option><option  value=17>Bangladesh</option><option  value=18>Barbados</option><option  value=19>Belarus - Byelarus</option><option  value=20>Belgique - Belgie</option><option  value=21>Belize</option><option  value=22>Benin</option><option  value=23>Bermuda</option><option  value=24>Bhutan</option><option  value=25>Bolivia</option><option  value=26>Bosna i Hercegovina</option><option  value=27>Botswana</option><option  value=28>Bouvet Island - Bouvetoya</option><option  value=29>Brasil</option><option  value=30>Brunei</option><option  value=31>Bulgaria</option><option  value=32>Burkina Faso</option><option  value=33>Burma - Myanmar</option><option  value=34>Burundi</option><option  value=35>Cabo Verde</option><option  value=36>Cameroon</option><option  value=37>Canada</option><option  value=38>Cayman Islands</option><option  value=39>Central Africa</option><option  value=40>Chad - Tchad</option><option  value=41>Chile</option><option  value=42>China</option><option  value=43>Christmas Island</option><option  value=44>Cocos Islands</option><option  value=45>Colombia</option><option  value=46>Comores</option><option  value=47>Congo</option><option  value=48>Cook Islands</option><option  value=49>Costa Rica</option><option  value=50>Cote d Ivoire</option><option  value=51>Croatia - Hrvatska</option><option  value=52>Cuba</option><option  value=53>Cyprus</option><option  value=54>Czech Republic</option><option  value=55>Danmark</option><option  value=56>Deutschland</option><option  value=57>Djibouti</option><option  value=58>Dominica</option><option  value=59>Ecuador</option><option  value=60>Eesti</option><option  value=61>Egypt</option><option  value=62>El Salvador</option><option  value=63>Eritrea</option><option  value=64>Espana</option><option  value=65>Ethiopia - Ityopiya</option><option  value=66>Falkland Islands</option><option  value=67>Faroyar</option><option  value=68>Fiji</option><option  value=69>France</option><option  value=70>Gabon</option><option  value=71>Gambia</option><option  value=72>Georgia - Sakartvelo</option><option  value=73>Ghana</option><option  value=74>Gibraltar</option><option  value=75>Greece - Ellas</option><option  value=76>Greenland - Kalaallit Nunaat</option><option  value=77>Grenada</option><option  value=78>Guadaloupe</option><option  value=79>Guam</option><option  value=80>Guatemala</option><option  value=81>Guine-Bissau</option><option  value=82>Guinea Ecuatorial</option><option  value=83>Guinee</option><option  value=84>Guyana</option><option  value=85>Guyane</option><option  value=86>Haiti</option><option  value=87>Heard and McDonald Islands</option><option  value=88>Honduras</option><option  value=89>Hong Kong</option><option  value=90>India - Bharat</option><option  value=91>Indian Ocean Territory</option><option  value=92>Indonesia</option><option  value=93>Iran</option><option  value=94>Iraq</option><option  value=95>Ireland</option><option  value=96>Island</option><option  value=97>Italia</option><option  value=98>Jamaica</option><option  value=99>Japan</option><option  value=100>Jordan - Urdun</option><option  value=101>Kampuchea</option><option  value=102>Kazakhstan</option><option  value=103>Kenya</option><option  value=104>Kiribati</option><option  value=105>Korea, North</option><option  value=106>Korea, South</option><option  value=107>Kuwayt</option><option  value=108>Kyrgyzstan</option><option  value=109>Laos</option><option  value=110>Latvija</option><option  value=111>Lebanon - Lubnaniyah</option><option  value=112>Lesotho</option><option  value=113>Liberia</option><option  value=114>Libiya</option><option  value=115>Liechtenstein</option><option  value=116>Lietuva</option><option  value=117>Luxembourg</option><option  value=118>Macau</option><option  value=119>Madagascar</option><option  value=120>Magyarorszag</option><option  value=121>Makedonija</option><option  value=122>Malawi</option><option  value=123>Malaysia</option><option  value=124>Maldives</option><option  value=125>Mali</option><option  value=126>Malta</option><option  value=127>Marshall Islands</option><option  value=128>Martinique</option><option  value=129>Mauritania - Muritaniyah</option><option  value=130>Mauritius</option><option  value=131>Mayotte</option><option  value=132>Mexico</option><option  value=133>Micronesia</option><option  value=134>Mocambique</option><option  value=135>Moldova</option><option  value=136>Monaco</option><option  value=137>Mongol Uls</option><option  value=138>Montserrat</option><option  value=139>Morocco - Maghrib</option><option  value=140>Namibia</option><option  value=141>Nauru</option><option  value=142>Nederland</option><option  value=143>Nederlandse Antillen</option><option  value=144>Nepal</option><option  value=145>New Zealand</option><option  value=146>Nicaragua</option><option  value=147>Niger</option><option  value=148>Nigeria</option><option  value=149>Niue</option><option  value=150>Norfolk Island</option><option  value=151>Norge</option><option  value=152>Northern Mariana Islands</option><option  value=153>Nouvelle-Caledonie</option><option  value=154>Oman - Uman</option><option  value=155>Pakistan</option><option  value=156>Palau - Belau</option><option  value=157>Panama</option><option  value=158>Papua New Guinea</option><option  value=159>Paraguay</option><option  value=160>Peru</option><option  value=161>Philippines - Pilipinas</option><option  value=162>Pitcairn Island</option><option  value=163>Polska</option><option  value=164>Polynesie Francaise</option><option  value=165>Portugal</option><option  value=166>Puerto Rico</option><option  value=167>Qatar</option><option  value=168>Republica Dominicana</option><option  value=169>Reunion</option><option  value=170>Romania</option><option  value=171>Rossiya</option><option  value=172>Rwanda</option><option  value=173>Saint Helena</option><option  value=174>Saint Kitts &amp; Nevis</option><option  value=175>Saint Lucia</option><option  value=176>Saint Vincent and The Grenadines</option><option  value=177>Samoa</option><option  value=178>San Marino</option><option  value=179>Sao Tome and Principe</option><option  value=180>Saudi Arabia</option><option  value=181>Schweiz - Suisse</option><option  value=182>Senegal</option><option  value=183>Seychelles</option><option  value=184>Sierra Leone</option><option  value=185>Singapore</option><option  value=186>Slovakia</option><option  value=187>Slovenija</option><option  value=188>Solomon Islands</option><option  value=189>Somalia</option><option  value=190>South Africa</option><option  value=191>South Georgia</option><option  value=192>Sri Lanka</option><option  value=193>St. Pierre et Miquelon</option><option  value=194>Sudan</option><option  value=195>Suomi</option><option  value=196>Suriname</option><option  value=197>Svalbard og Jan Mayen</option><option  value=198>Sverige</option><option  value=199>Swaziland</option><option  value=200>Syria - Suriyah</option><option  value=201>Taiwan</option><option  value=202>Tajikistan</option><option  value=203>Tanzania</option><option  value=204>Terre Australes et Antarctiques</option><option  value=205>Thailand</option><option  value=206>Timor</option><option  value=207>Togo</option><option  value=208>Tokelau</option><option  value=209>Tonga</option><option  value=210>Trinidad and Tobago</option><option  value=211>Tunisia - Tunis</option><option  value=212>Turkiye</option><option  value=213>Turkmenistan</option><option  value=214>Turks and Caicos Islands</option><option  value=215>Tuvalu</option><option  value=216>U.S. Minor Outlying Islands</option><option  value=217>Uganda</option><option  value=218>Ukrayina</option><option  value=219>United Arab Emirates</option><option  value=220>United Kingdom</option><option  value=221>United States of America</option><option  value=222>Uruguay</option><option  value=223>Uzbekistan</option><option  value=224>Vanuatu</option><option  value=225>Vatican City</option><option  value=226>Venezuela</option><option  value=227>Vietnam - Viet Nam</option><option  value=228>Virgin Islands (UK)</option><option  value=229>Virgin Islands (USA)</option><option  value=230>Wallis et Futuna</option><option  value=231>Western Sahara</option><option  value=232>Yemen</option><option  value=233>Yisrael</option><option  value=234>Yugoslavia (Former)</option><option  value=235>Zaire</option><option  value=236>Zambia</option><option  value=237>Zimbabwe</option><option  value=238>Österreich</option></select></td>
 
							<td><label>Membre </label> : <select name="membre" class="pays" ><option  value=1 selected >Sympatisant</option><option  value=2>D'honneur</option><option  value=3>Actif</option><option  value=4>Fondateur</option></select></td><tr></table>
					</fieldset>
					<INPUT type="hidden" name="Idmembre" value="2">
					<fieldset>
						<legend>Coordonnées </legend>
 
						<label>Adresse </label> : <textarea name="adresse" rows="1" Cols="60"></textarea ><br />
						<label>Code Postal </label> : <input class="cp" type="text" name="cp" value="0"  />
						<label>Ville </label> : <input type="text" name="ville" value=""/>
						<br />
 
						<br />
						<table>
						<td><label>N° Fix : <input class="tel" type="text" name="NumFix" value=""/></td>
						<td><label>Portable : <input class="tel" type="text" name="NumPort" value=""/></td>
						<td><label>Urgence : <input class="tel" type="text" name="NumUrg" value=""/></td>
						</table>
						<br />
 
 
						<label>Adresse Mail</label><span class="c2">*</span> : <input type="text" name="email" value="titi@truc.com"> 
 
					</fieldset>	
 
					<fieldset>
						<legend>Informations sur le Séjour</legend>
													<table>
								<tr><td><label>Séjour du</label> :</td><td> <script>DateInput('datedeb', true, 'YYYY-MM-DD','2009-09-04' )</script></td>
 
								<td><label><label> au </label>: </td><td> <script>DateInput('datefin', true, 'YYYY-MM-DD','2009-09-16' )</script></td>
 
							</table>
											</fieldset>
 
					<fieldset>
						<legend>Informations Supplémentaire</legend> 
		<table><tr><td><label>Date de la Cotisation </label> :</td><td> <script>DateInput('datecot', true, 'YYYY-MM-DD','2009-09-07' )</script></td><tr></table><Br/>
 
						<label>Commentaire </label> : <textarea name="commentaire" rows="5" Cols="50" ></textarea><br />
 
					</fieldset>
					<br /><table><tr><td><input type="reset" name="reset" value="Effacer"></td><td><input type="submit" name="envoi" value="Envoyer"></td></tr></table>					
			</form>
 
           </p>
 
		</div>
 
       <div id="pied_de_page">
 
           <p>Copyright "Tout pourri Corporation" 2009, tous droits réservés</p>
       </div>
 
   </body>
</html>

C'est ce que tu veux ?

Bon j'ai testé en attribuant la valeur de s comme pour ok mais il ne se passe toujours rien ! Pas d'erreur mais pas d'affichage non plus !

**E.Bzz** · 08/09/2009, 16h28

Envoyé par E.Bzz

Sinon, on pourra voir ton code généré complet (HTML + JavaScript) ?

Sur le forum JavaScript (et HTML, CSS) on ne poste que du code généré (et non du code serveur)

De plus PHP est loin d'être ma langue maternelle

A+

**francois_a** · 08/09/2009, 16h37

Mille excuses. J'ai édité et remplacé mon code par le code source généré.

**E.Bzz** · 08/09/2009, 16h50

Alors c'est le this dans la fonction qui ne va pas (this renvoie à l'objet courant, mais là il ne correspond à rien).

Code :

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

1
2
3
4
5
function maj(obj){
	document.getElementById('OK').value = "OK";
	document.getElementById('s').value = "2";
	obj.form.submit();
}

avec l'appel

Code :

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

<select ... onchange="maj(this);">

A+

**francois_a** · 08/09/2009, 17h07

Oui, il est vrai que une fois que l'on a l'explication çà parait logique !

Bon ben il ne se passe toujours rien !

Le 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
174
175
176
177
178
179
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Gestion Site - Membre</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
 
			<script type='text/JavaScript'>
function affCache(idDiv) {
	var div = document.getElementById(idDiv);
	if (div.style.display == "")
	div.style.display = "none";
	else
	div.style.display = "";
	}
 
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 à la selection d'un séjour
			*/
function go(){
	//Récup les informations demander en mode text dès qu'elles sont arrivées
	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){
			ladate = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('date1').innerHTML = ladate;
		}
	}
 
	xhr.open("POST","oAjax.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 l'auteur
	resp = document.getElementById('responsable');
	idresp = resp.options[resp.selectedIndex].value;
	xhr.send("responsable="+idresp);
}
 
			/**
			* Méthode qui sera appelée à la selection d'un séjour
			*/			
function maj(obj){
	document.getElementById('OK').value = "OK";
	document.getElementById('s').value = "2";
	obj.form.submit();
 
	}
 
			</script>
 
		<script type="text/javascript" src="calendarDateInput.js"></script>
 
   </head>
 
   <body>
 
 
          <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
 
       <div id="menu">        
           <div class="element_menu">
		   		<DIV ID=mv2></DIV>
				<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert2.js"></SCRIPT>
           </div>        
       </div>
 
       <!-- Le corps -->
       <div id="corps"> 
 
           <h1>Gestion Site - Membre</h1>
 
 
           <p>
		   <!-- Selection de l'action -->
<INPUT TYPE=RADIO NAME="choix" VALUE='1'  onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=1");' />Ajouter
<INPUT TYPE=RADIO NAME="choix" VALUE='2' checked onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=2");' />Modifier
<INPUT TYPE=RADIO NAME="choix" VALUE='3'  onclick='window.location.replace("http://127.0.0.1/Site/membre.php?s=3");' />Supprimer
 
<form name="formulaire" action="/Site/membre.php?s=2" method="post"><fieldset><legend>Modification</legend><table><td><label>Membre </label> : <select name='membre' id='membre' onchange='maj(this);' ><option  value=1>toto toto</option><option  value=2>titi titi</option><option  value=3>test testu</option></select></td><td><input type="submit" name="OK" value="OK"></td></table></fieldset> 
					<fieldset name="test" id="test" >
						<legend>Données Personnelles</legend>
 
							<label>Intitulé </label> : <select name="intitule" id="intitule">
														<option value="M." selected >M.</option>
														<option value="Mme">Mme</option>
														<option value="Mle">Mle</option>
													</select>
							<label>Nom</label><span class="c2">*</span> : <input type="text" name="nom"  value="toto"/>
 
							<label>Prénom</label><span class="c2">*</span> : <input type="text" name="prenom"  value="toto" /><br />
						<table>
					<tr><td><label>Date de Naissance </label> :</td><td> <script>DateInput('dateN', true, 'YYYY-MM-DD','2009-09-04' )</script></td>
 
							<td><label>Nationalité </label> : <select name="pays" class="pays" ><option  value=163 selected >Polska</option><option   >----------</option><option  value=1>Afghanestan</option><option  value=2>Albania</option><option  value=3>Algeria</option><option  value=4>American Samoa</option><option  value=5>Andorre</option><option  value=6>Angola</option><option  value=7>Anguilla</option><option  value=8>Antarctica</option><option  value=9>Antigua and Barbuda</option><option  value=10>Argentina</option><option  value=11>Armenia - Hayastan</option><option  value=12>Aruba</option><option  value=13>Australia</option><option  value=14>Azerbaycan</option><option  value=15>Bahamas</option><option  value=16>Bahrayn</option><option  value=17>Bangladesh</option><option  value=18>Barbados</option><option  value=19>Belarus - Byelarus</option><option  value=20>Belgique - Belgie</option><option  value=21>Belize</option><option  value=22>Benin</option><option  value=23>Bermuda</option><option  value=24>Bhutan</option><option  value=25>Bolivia</option><option  value=26>Bosna i Hercegovina</option><option  value=27>Botswana</option><option  value=28>Bouvet Island - Bouvetoya</option><option  value=29>Brasil</option><option  value=30>Brunei</option><option  value=31>Bulgaria</option><option  value=32>Burkina Faso</option><option  value=33>Burma - Myanmar</option><option  value=34>Burundi</option><option  value=35>Cabo Verde</option><option  value=36>Cameroon</option><option  value=37>Canada</option><option  value=38>Cayman Islands</option><option  value=39>Central Africa</option><option  value=40>Chad - Tchad</option><option  value=41>Chile</option><option  value=42>China</option><option  value=43>Christmas Island</option><option  value=44>Cocos Islands</option><option  value=45>Colombia</option><option  value=46>Comores</option><option  value=47>Congo</option><option  value=48>Cook Islands</option><option  value=49>Costa Rica</option><option  value=50>Cote d Ivoire</option><option  value=51>Croatia - Hrvatska</option><option  value=52>Cuba</option><option  value=53>Cyprus</option><option  value=54>Czech Republic</option><option  value=55>Danmark</option><option  value=56>Deutschland</option><option  value=57>Djibouti</option><option  value=58>Dominica</option><option  value=59>Ecuador</option><option  value=60>Eesti</option><option  value=61>Egypt</option><option  value=62>El Salvador</option><option  value=63>Eritrea</option><option  value=64>Espana</option><option  value=65>Ethiopia - Ityopiya</option><option  value=66>Falkland Islands</option><option  value=67>Faroyar</option><option  value=68>Fiji</option><option  value=69>France</option><option  value=70>Gabon</option><option  value=71>Gambia</option><option  value=72>Georgia - Sakartvelo</option><option  value=73>Ghana</option><option  value=74>Gibraltar</option><option  value=75>Greece - Ellas</option><option  value=76>Greenland - Kalaallit Nunaat</option><option  value=77>Grenada</option><option  value=78>Guadaloupe</option><option  value=79>Guam</option><option  value=80>Guatemala</option><option  value=81>Guine-Bissau</option><option  value=82>Guinea Ecuatorial</option><option  value=83>Guinee</option><option  value=84>Guyana</option><option  value=85>Guyane</option><option  value=86>Haiti</option><option  value=87>Heard and McDonald Islands</option><option  value=88>Honduras</option><option  value=89>Hong Kong</option><option  value=90>India - Bharat</option><option  value=91>Indian Ocean Territory</option><option  value=92>Indonesia</option><option  value=93>Iran</option><option  value=94>Iraq</option><option  value=95>Ireland</option><option  value=96>Island</option><option  value=97>Italia</option><option  value=98>Jamaica</option><option  value=99>Japan</option><option  value=100>Jordan - Urdun</option><option  value=101>Kampuchea</option><option  value=102>Kazakhstan</option><option  value=103>Kenya</option><option  value=104>Kiribati</option><option  value=105>Korea, North</option><option  value=106>Korea, South</option><option  value=107>Kuwayt</option><option  value=108>Kyrgyzstan</option><option  value=109>Laos</option><option  value=110>Latvija</option><option  value=111>Lebanon - Lubnaniyah</option><option  value=112>Lesotho</option><option  value=113>Liberia</option><option  value=114>Libiya</option><option  value=115>Liechtenstein</option><option  value=116>Lietuva</option><option  value=117>Luxembourg</option><option  value=118>Macau</option><option  value=119>Madagascar</option><option  value=120>Magyarorszag</option><option  value=121>Makedonija</option><option  value=122>Malawi</option><option  value=123>Malaysia</option><option  value=124>Maldives</option><option  value=125>Mali</option><option  value=126>Malta</option><option  value=127>Marshall Islands</option><option  value=128>Martinique</option><option  value=129>Mauritania - Muritaniyah</option><option  value=130>Mauritius</option><option  value=131>Mayotte</option><option  value=132>Mexico</option><option  value=133>Micronesia</option><option  value=134>Mocambique</option><option  value=135>Moldova</option><option  value=136>Monaco</option><option  value=137>Mongol Uls</option><option  value=138>Montserrat</option><option  value=139>Morocco - Maghrib</option><option  value=140>Namibia</option><option  value=141>Nauru</option><option  value=142>Nederland</option><option  value=143>Nederlandse Antillen</option><option  value=144>Nepal</option><option  value=145>New Zealand</option><option  value=146>Nicaragua</option><option  value=147>Niger</option><option  value=148>Nigeria</option><option  value=149>Niue</option><option  value=150>Norfolk Island</option><option  value=151>Norge</option><option  value=152>Northern Mariana Islands</option><option  value=153>Nouvelle-Caledonie</option><option  value=154>Oman - Uman</option><option  value=155>Pakistan</option><option  value=156>Palau - Belau</option><option  value=157>Panama</option><option  value=158>Papua New Guinea</option><option  value=159>Paraguay</option><option  value=160>Peru</option><option  value=161>Philippines - Pilipinas</option><option  value=162>Pitcairn Island</option><option  value=163>Polska</option><option  value=164>Polynesie Francaise</option><option  value=165>Portugal</option><option  value=166>Puerto Rico</option><option  value=167>Qatar</option><option  value=168>Republica Dominicana</option><option  value=169>Reunion</option><option  value=170>Romania</option><option  value=171>Rossiya</option><option  value=172>Rwanda</option><option  value=173>Saint Helena</option><option  value=174>Saint Kitts &amp; Nevis</option><option  value=175>Saint Lucia</option><option  value=176>Saint Vincent and The Grenadines</option><option  value=177>Samoa</option><option  value=178>San Marino</option><option  value=179>Sao Tome and Principe</option><option  value=180>Saudi Arabia</option><option  value=181>Schweiz - Suisse</option><option  value=182>Senegal</option><option  value=183>Seychelles</option><option  value=184>Sierra Leone</option><option  value=185>Singapore</option><option  value=186>Slovakia</option><option  value=187>Slovenija</option><option  value=188>Solomon Islands</option><option  value=189>Somalia</option><option  value=190>South Africa</option><option  value=191>South Georgia</option><option  value=192>Sri Lanka</option><option  value=193>St. Pierre et Miquelon</option><option  value=194>Sudan</option><option  value=195>Suomi</option><option  value=196>Suriname</option><option  value=197>Svalbard og Jan Mayen</option><option  value=198>Sverige</option><option  value=199>Swaziland</option><option  value=200>Syria - Suriyah</option><option  value=201>Taiwan</option><option  value=202>Tajikistan</option><option  value=203>Tanzania</option><option  value=204>Terre Australes et Antarctiques</option><option  value=205>Thailand</option><option  value=206>Timor</option><option  value=207>Togo</option><option  value=208>Tokelau</option><option  value=209>Tonga</option><option  value=210>Trinidad and Tobago</option><option  value=211>Tunisia - Tunis</option><option  value=212>Turkiye</option><option  value=213>Turkmenistan</option><option  value=214>Turks and Caicos Islands</option><option  value=215>Tuvalu</option><option  value=216>U.S. Minor Outlying Islands</option><option  value=217>Uganda</option><option  value=218>Ukrayina</option><option  value=219>United Arab Emirates</option><option  value=220>United Kingdom</option><option  value=221>United States of America</option><option  value=222>Uruguay</option><option  value=223>Uzbekistan</option><option  value=224>Vanuatu</option><option  value=225>Vatican City</option><option  value=226>Venezuela</option><option  value=227>Vietnam - Viet Nam</option><option  value=228>Virgin Islands (UK)</option><option  value=229>Virgin Islands (USA)</option><option  value=230>Wallis et Futuna</option><option  value=231>Western Sahara</option><option  value=232>Yemen</option><option  value=233>Yisrael</option><option  value=234>Yugoslavia (Former)</option><option  value=235>Zaire</option><option  value=236>Zambia</option><option  value=237>Zimbabwe</option><option  value=238>Österreich</option></select></td>
 
							<td><label>Membre </label> : <select name="membre" class="pays" ><option  value=1 selected >Sympatisant</option><option  value=2>D'honneur</option><option  value=3>Actif</option><option  value=4>Fondateur</option></select></td><tr></table>
					</fieldset>
					<INPUT type="hidden" name="Idmembre" value="1">
					<fieldset>
						<legend>Coordonnées </legend>
 
						<label>Adresse </label> : <textarea name="adresse" rows="1" Cols="60"></textarea ><br />
						<label>Code Postal </label> : <input class="cp" type="text" name="cp" value="0"  />
						<label>Ville </label> : <input type="text" name="ville" value=""/>
						<br />
 
						<br />
						<table>
						<td><label>N° Fix : <input class="tel" type="text" name="NumFix" value=""/></td>
						<td><label>Portable : <input class="tel" type="text" name="NumPort" value=""/></td>
						<td><label>Urgence : <input class="tel" type="text" name="NumUrg" value=""/></td>
						</table>
						<br />
 
 
						<label>Adresse Mail</label><span class="c2">*</span> : <input type="text" name="email" value="toto@truc.fr"> 
 
					</fieldset>	
 
					<fieldset>
						<legend>Informations sur le Séjour</legend>
													<table>
								<tr><td><label>Séjour du</label> :</td><td> <script>DateInput('datedeb', true, 'YYYY-MM-DD','2009-09-04' )</script></td>
 
								<td><label><label> au </label>: </td><td> <script>DateInput('datefin', true, 'YYYY-MM-DD','2009-09-16' )</script></td>
 
							</table>
											</fieldset>
 
					<fieldset>
						<legend>Informations Supplémentaire</legend> 
		<table><tr><td><label>Date de la Cotisation </label> :</td><td> <script>DateInput('datecot', true, 'YYYY-MM-DD','2009-09-04' )</script></td><tr></table><Br/>
 
						<label>Commentaire </label> : <textarea name="commentaire" rows="5" Cols="50" ></textarea><br />
 
					</fieldset>
					<br /><table><tr><td><input type="reset" name="reset" value="Effacer"></td><td><input type="submit" name="envoi" value="Envoyer"></td></tr></table>					
			</form>
 
           </p>
 
		</div>
 
       <div id="pied_de_page">
 
           <p>Copyright "Tout pourri Corporation" 2009, tous droits réservés</p>
       </div>
 
   </body>
</html>

**E.Bzz** · 08/09/2009, 17h24

Code :

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

1
2
3
4
5
6
function maj(obj){
	document.getElementById('OK').value = "OK";
	document.getElementById('s').value = "2";
	obj.form.submit();
 
	}

Je ne trouve pas d'éléments ayant pour id "s" et "OK"

A+

**francois_a** · 08/09/2009, 17h47

En effet...

Bon j'ai corrigé le problème pour OK par contre je ne vois pas comment faire pour le s.

s prends sa valeur en Get (et non en post). Je récupère sa valeur dans une variable php.

[AJAX] Transformer un chargement par validation en chargement dynamique

AJAX

Discussions similaires

Partager

Partager