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 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
<?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&eacute;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&eacute; avec succ&egrave;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 JAVASCRIPT : Sélectionner tout - Visualiser dans une fenêtre à part
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' />&nbsp;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 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
function insertGuide(){
	var lgfr = 0, lgde = 0, lgnl = 0, erreur = 0;
 
	var connection = createConnection();
 
	document.getElementById("conteneur").innerHTML = "<img src='./29.gif' alt='loading' />&nbsp;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 ERREUR : Sélectionner tout - Visualiser dans une fenêtre à part
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.

En vous remerciant d'avance pour toutes informations, aide, et soutiens que vous pourrez me fournir, je vous souhaite une bonne après midi.