[AJAX] Récupération de formulaire et renvoi
Bonjour à tous,
Toujours dans le cadre du développement d'un site de gestion de réservation de visite guidée, je planche actuellement sur la partie administration.
Alors, j'ai créé une page index.php dans laquelle j'inclus un menu.php. Ce menu est composé d'une série de div, qui font des appels asynchrone AJAX afin d'afficher les informations souhaitées.
Je suis actuellement sur la réalisation d'un formulaire d'ajout de guide pour les visites. Le formulaire est on ne peut plus simple :
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
| <?php
$nom = (isset($_POST['nomguide'])) ? $_POST['nomguide'] : null;
$prenom = (isset($_POST['prenomguide'])) ? $_POST['prenomguide'] : null;
$lgfr = (isset($_POST['lgfr'])) ? 1 : 0;
$lgde = (isset($_POST['lgde'])) ? 1 : 0;
$lgnl = (isset($_POST['lgnl'])) ? 1 : 0;
if( $nom == null && $prenom == null ){
/* affichage du formulaire d'ajout */
echo '<form method="POST" name="formguide" id="formguide" action="">';
echo '<label for="nomguide">Nom : </label><input type="text" name="nomguide" id="nomguide" /><br>';
echo '<label for="prenomguide">Prénom : </label><input type="text" name="prenomguide" id="prenomguide" /><br>';
echo '<label for="langue">Langue : </label>';
echo '<input type="checkbox" name="lgfr" id="lgfr" >FR</input>';
echo '<input type="checkbox" name="lgde" id="lgde" >DE</input>';
echo '<input type="checkbox" name="lgnl" id="lgnl" >NL</input><br>';
echo '<input type="submit" value="Enregistrer" onClick="insertGuide()" /><input type="reset" value="Annuler"/></form>';
}
else{
try{
include ('./data.php');
/* insertion des informations dans le BDD */
$requete = 'INSERT INTO guide (nom, prenom, fr, de, nl ) VALUES ($nom, $prenom, $lgfr, $lgde, $lgnl )';
$retour = $bdd->query($requete);
echo 'Guide ajouté avec succès.';
}
catch (Exception $e){
die('Erreur :'.$e->getMessage());
}
}
?> |
Dans mon fichier principal, j'ai défini un div nommé et identifié "conteneur". Lors du clic sur le div de demande d'ajout d'un guide, je fait l'appel suivant en Javascript / AJAX
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function addGuide(){
var connection = createConnection();
document.getElementById("conteneur").innerHTML = "<img src='./29.gif' alt='loading' /> Veuillez patienter ...";
connection.onreadystatechange=function(){
if( connection.readyState==4 && connection.status==200){
document.getElementById("conteneur").innerHTML = connection.responseText;
}
}
connection.open("POST", "./inc/addGuide.php", true);
connection.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
connection.send();
} |
Par la suite, lorsque je souhaite enregistrer le guide dans ma BDD, je fais appel à la fonction suivante :
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
| function insertGuide(){
var lgfr = 0, lgde = 0, lgnl = 0, erreur = 0;
var connection = createConnection();
document.getElementById("conteneur").innerHTML = "<img src='./29.gif' alt='loading' /> Veuillez patienter ...";
connection.onreadystatechange=function(){
if( connection.readyState==4 && connection.status==200){
document.getElementById("conteneur").innerHTML = connection.responseText;
}
}
/* assignation de la langue */
if( document.addguide.lgfr.checked == true)
lgfr = 1;
if( document.addguide.lgde.checked == true)
lgde = 1;
if( document.addguide.lgnl.checked == true)
lgnl = 1;
var nom = "", prenom = "";
/* vérification du nom et assignation */
if( document.addguide.nomguide.value !="")
nom = document.getElementById("nomguide").value;
else{
document.addguide.nomguide.style.backgroundcolor = "red";
erreur = 1;
}
/* vérification du prenom et assignation */
if( document.addguide.prenomguide.value != "")
prenom = document.getElementById("prenomguide").value;
else{
document.addguide.prenomguide.style.backgroundcolor = "red";
erreur = 1;
}
/* si erreur, retourne false*/
if( erreur != 0){
return "false";
}
var requete = "&nomguide="+nom+"&prenomguide"+prenom+"&lgfr="+lgfr+"&lgde="+lgde+"&lgnl="+lgnl;
connection.open("POST", "./inc/addGuide.php", true);
connection.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
connection.send();
} |
Et voici le soucis rencontré. Lorsque je souhaite valider le formulaire, j'obtiens le message suivant :
Code:
1
2
3
4
| document.addguide is undefined
insertGuide()javascript.js (ligne 120)
onclick(event=click clientX=263, clientY=264)2 (ligne 2)
if( document.addguide.lgfr.checked == true) |
Pourtant, j'ai bien créé mon formulaire, mais il ne trouve pas les champs demandé. Est ce que Javascript est capable de manipuler des informations récupérée de manière asynchrone ?
J'ai également, avant cela, essayer de récupérer mes éléments de formulaire par la fonction "getElementById()", mais il me fait la même erreur.
Je suis impatient que l'on me guide au travers de ce problème. :D
En vous remerciant d'avance pour toutes informations, aide, et soutiens que vous pourrez me fournir, je vous souhaite une bonne après midi.
