[AJAX] vérifier le contenu d'un select après une XMLHttpRequest puis récupérer son contenu après un POST

**Nijin** · 21/04/2011, 15h32

Bonjour à la communauté.

Mon problème en est un double en réalité. En AJAX et en PHP, mais les 2 ont la même source.
Je fais un formulaire d'inscription et j'utilise une XMLHttpRequest pour charger la(les) ville(s) en fonction du code postal saisit (d'ailleurs, merci à siddh pour son article "Web 2.0, allez plus loin avec AJAX et XMLHttpRequest"

).

Lors du clic sur le bouton "S'inscrire", je vérifie que tous les champs soient remplis. Et c'est là que se pose le problème car le script de vérification renvoie une erreur, et du coup le formulaire passe à la page d'enregistrement de l'inscription et qui renvoie elle aussi une erreur.

Je vous poste le code (allégé) des fichiers que j'utilise, il y a 5 morceaux de code.

Code du formulaire (HTML) :

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
 
<table>
	<!-- Formulaire pour l'inscription d'un client -->
	<form  method='post' action='os_insc_cli_valid.php' id='form_insc_client' onsubmit='return verif_champs_insc(this);'>
		<tr valign='top'>
			<td><label for='inscCivilite' id='lblInscCivilite'>Civilit&eacute; * :</label></td>
			<td>
				<select name='inscCivilite' id='cbInscCivilite'>
					<option value='0'>&nbsp;</option>
					<option value='M.'>M.</option>
					<option value='Mlle.'>Mlle.</option>
					<option value='Mme.'>Mme.</option>
				</select>
			</td>
		</tr>
		<tr valign='top'>
			<td><label for='inscNom' id='lblInscNom'>Nom * : </label></td>
			<td><input type='text' name='inscNom' id='tbInscNom' size='30' maxlength='50' value='' /></td><!--style='margin-left: 25px;'-->
		</tr>
		<tr valign='top'>
			<td><label for='inscPrenom' id='lblInscPrenom'>Pr&eacute;nom * : </label></td>
			<td><input type='text' name='inscPrenom' id='tbInscPrenom' size='30' maxlength='50' value='' /></td>
		</tr>
		<tr valign='top'>
			<td><label for='inscAdr' id='lblInscAdr'>Adresse* : </label></td>
			<td><textarea name='inscAdr' id='taInscAdr' cols='30' rows='2' ></textarea></td>
		</tr>
		<tr valign='top'>
			<td><label for='inscCP' id='lblInscCP'>Code postal * :</label></td>
			<td><input type='text' name='inscCP' id='tbInscCP' size='10' value='' onKeyPress='new SUC(this);' onBlur='xhr_get_vil(this);' /></td>
		</tr>
		<tr valign='top'>
			<td><label for='inscVil' id='lblInscVil'>Ville * :</label></td>
			<td>
				<span name='spInscVil' id='spanInscVil'>
					<select name='inscVil' id='listInscVil'>
						<option value='0'>Saisissez votre code postal pour avoir la ville.</option>
					</select>
				</span>
			</td>
		</tr>
		<tr valign="top">
			<td style='font-style: italic; font-size: 90%;'>* Champs obligatoires</td>
			<td><input type="submit" id="btInscrire" name="inscrire" value="S'inscrire" /></td>
		</tr>
	</form>
</table>

Code AJAX pour la XMLHttpRequest :

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
 
// Crée un objet XMLHttpRequest en fonction du navigateur.
function create_xhr(){
	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;
}
 
// Recherche la (les) ville(s) en fonction du code postal passé en paramètre.
function xhr_get_vil(champ){
	try{
		if (champ.value != ''){
		   var xhr = create_xhr();
 
			// 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){
					// On se sert de innerHTML pour rajouter les options a la liste
					document.getElementById('spanInscVil').innerHTML = xhr.responseText;
				}
			}
 
			// Ici on va voir comment faire du post
			xhr.open('POST', 'xhr/get_villes_from_cp.php', true);
 
			// ne pas oublier ça pour le post
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
			var data = 'cpCli=' + escape(champ.value);
			xhr.send(data);
		}
	}
	catch(e){
		alert('erreur récupérée : \n' + e);
	}
}

Code du fichier "get_villes_from_cp.php" (fichier appelé par la fonction AJAX) (PHP) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
	echo "<select name='inscVil' id='listInscVil'>";
 
	if(isset($_POST["cpCli"])){
		mysql_connect("localhost","root","");
		mysql_select_db("my_test_base");
		$res = mysql_query("SELECT `vil` FROM `cpvil` WHERE `cp` = ".$_POST['cpCli']);
		while($row = mysql_fetch_array($res)){
			echo "<option value='".$row["vil"]."' selected='selected'>".$row["vil"]."</option>";
		}
	}
	echo "</select>";
?>

Code de la fonction JS qui vérifie la saisie des champs (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
42
43
 
// Vérifie que tous les champs obligatoires pour l'inscription soient remplis
function verif_champs_insc(form){
 
	// Civilité
	if(form.elements['cbInscCivilite'].value == '0'){
		alert('Veuillez sélectionner votre civilité.');
		form.elements['cbInscCivilite'].focus();
		return false;
	}
	// Nom
	if(form.elements['tbInscNom'].value == ''){
		alert('Veuillez saisir votre nom.');
		form.elements['tbInscNom'].focus();
		return false;
	}
	// Prénom
	if(form.elements['tbInscPrenom'].value == ''){
		alert('Veuillez saisir votre prénom.');
		form.elements['tbInscPrenom'].focus();
		return false;
	}
	// Adresse
	if(form.elements['taInscAdr'].value == ''){
		alert('Veuillez saisir votre adresse.');
		form.elements['taInscAdr'].focus();
		return false;
	}
	// Code Postal
	if(form.elements['tbInscCP'].value == ''){
		alert('Veuillez saisir votre code postal.');
		form.elements['tbInscCP'].focus();
		return false;
	}
	// Ville
 
	alert('ville = ' + document.getElementById('listInscVil').selectedIndex);
	if(form.elements['inscVil'].value == ''){
		alert('Veuillez sélectionner votre ville.');
		form.elements['inscVil'].focus();
		return false;
	}
}

Et enfin le code de la page d'enregistrement (PHP) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
echo 'nombre de variables postée = '.count($_POST). '<br />';
echo 'valeurs du POST : '. print_r($_POST) .'<br />';
 
// Récupération des données saisies par le client lors de son inscription
$civilCli = $_POST['inscCivilite'];
$nomCli = $_POST['inscNom'];
$prenomCli = $_POST['inscPrenom'];
$adrCli = $_POST['inscAdr'];
$cpCli = $_POST['inscCP'];
$vilCli = $_POST['inscVil'];
 
echo $civilCli, $nomCli , $prenomCli, $adrCli, $cpCli, $vilCli

L'erreur retournée par le JS est la suivante :

Erreur*: form.elements.inscVil is undefined

L'erreur retournée par le PHP est la suivante :

Notice: Undefined index: inscVil in C:\Program Files\wamp\www\...

Ce que j'en ai compris :
1. La récupération par "document.getElementById" est bonne puisque le message d'alerte s'affiche correctement. Mais le "form.elements['inscVil'].value" renvoie l'erreur JS ci-dessus alors que la syntaxe est la bonne puisqu'utilisée pour la civilité. Là se trouve le premier problème.
2. Lors de la récupération des variables $_POST, la variable "inscVil" n'apparait pas. Là se situe le second problème.

Donc comment puis-je vérifier que la ville est bien saisie dans le JS et comment récupérer la variable dans mon fichier de récupération ?
Y a t-il une solution en AJAX pour enregistrer en base de données l'inscription sans passer par un fichier de récupération PHP qui serait plus simple?

Merci d'avance pour votre aide.