Récupération de formulaire et renvoi

[richard_sraing]

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 :

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 :

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 :

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 :

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.

[andry.aime]

Bonsoir,

Le name de ton formulaire est formguide mais pas addguide.

Code :

1
2
if( document.formguide.lgfr.checked)
  lgfr = 1;

PS: Sur le forum Ajax et Javascript, on a besoin du code HTML généré mais pas le code PHP.

A+.

[andry.aime]

echo '<input type="submit" value="Enregistrer" onClick="insertGuide()" />

Avec un bouton submit, tu vas recharger la page .

A+.

[richard_sraing]

Bon, je viens de regarder le code de ma page une fois que j'ai récupéré le code de formulaire par la demande AJAX. Je suis complètement ou quoi ??

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Malmundarium.be - Administration</title>
		<meta name="google-site-verification" content="DmbImTU6GgB4aMlZcy7sHob5zm8C1wxrS595e_Wj7gM" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="./inc/javascript.js"></script>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="./../css/malmundarium.css" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/admin.css" />
 
	</head>
	<body>
		<div style="margin:auto; border: 1px solid rgb(142,144,143);">
			<div class="header">
				<img src="./../img/entete-malmundarium.jpg" width="799px"/>
			</div>
			<div class="contenu">
				<div class="menu" id="view_demande" onClick="viewDemande()" >Voir les demandes</div>
				<div class="menu" id="view_salles" onClick="viewSalle()" >Voir salles confirm&eacute;e</div>
				<div class="menu" id="view_guide" onClick="viewGuide()" >Voir guide confirm&eacute;s</div>
				<div class="menu" id="view_guide" onClick="addGuide()" >Ajout d'un guide</div>
				<div class="menu" id="leave" onClick="leave()" >Quitter</div>
				<br>
				<div name="conteneur" id="conteneur"></div>			
			</div>
 
			<div class="footer">
				<img src="./../img/pied-malmundarium.jpg" width="799px" />
			</div>
		</div>
	</body>
</html>

Normalement dans ma balise <div name="conteneur" id="conteneur"></div> je devrais avoir le code de mon formulaire, à savoir :

Code HTML :

1
2
3
4
5
6
7
8
9
<form method="POST" name="formguide" id="formguide" action="">
<label for="nomguide">Nom : </label><input type="text" name="nomguide" id="nomguide" /><br>
<label for="prenomguide">Pr&eacute;nom : </label><input type="text" name="prenomguide" id="prenomguide" /><br>
<label for="langue">Langue : </label>
<input type="checkbox" name="lgfr" id="lgfr" >FR</input>
<input type="checkbox" name="lgde" id="lgde" >DE</input>
<input type="checkbox" name="lgnl" id="lgnl" >NL</input><br>
<input type="submit" value="Enregistrer" onClick="insertGuide()" /><input type="reset" value="Annuler"/>
</form>

et pourtant rien ...

Qu'est ce que je ne comprend pas, pourtant je vois mon formulaire ...



S'il vous plait,la je sèche...

[richard_sraing]

Bon,

Problème annulé. On vient de me signaler qu'il ne doit pas être possible d'ajouter des guides.
Il sera donc à ma charge de les ajouter directement dans la base de données.