[AJAX] vérifier le contenu d'un select après une XMLHttpRequest puis récupérer son contenu après un POST
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" :ccool: ).
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:
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é * :</label></td>
<td>
<select name='inscCivilite' id='cbInscCivilite'>
<option value='0'> </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é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:
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:
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:
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:
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 :
Citation:
Erreur*: form.elements.inscVil is undefined
L'erreur retournée par le PHP est la suivante :
Citation:
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.
