[AJAX] Récupération de formulaire et renvoi

**richard_sraing** · 06/04/2011, 13h58

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.

**andry.aime** · 06/04/2011, 15h54

Bonsoir,

Le name de ton formulaire est formguide mais pas addguide.

Code :

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

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** · 06/04/2011, 15h58

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

Avec un bouton submit, tu vas recharger la page

.

A+.

**richard_sraing** · 07/04/2011, 09h07

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 :

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
<!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 :

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

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** · 07/04/2011, 11h30

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.

[AJAX] Récupération de formulaire et renvoi

AJAX

Vue hybride

Discussions similaires

Partager

Partager