Formulaire : POST [Résolu]

frizou11 · 18/05/2008, 16h24

Bonjour, je me mets tout juste à AJAX et je suis les tutos de developpez.com (merci d'ailleurs).

Dans mon cas je crée un formulaire à deux champs texte (pseudo et message), et je souhaite qu'à la validation, une fonction JavaScript envoie les données à une page .php (qui fera des requetes SQL plus tard) en mode POST. En retour de réponse du serveur j'affiche les données envoyées à la page .php dans une boite de dialogue.

Mais pas de boite de dialogue qui s'affiche

Je précise que ma fonction JavaScript est bien appelée.

Voilà le code de la page contenant le formulaire :

Code :

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

1
2
3
4
5
6
7
8
 
              <form method="post" onsubmit="checkPostLivreDor()" action="">
                <p>Pseudo</p><br />
                <input name="pseudo" id="id_pseudo" type="text" /><br /><br />
                <p>Message</p><br />
                <textarea rows="5" cols="70" name="message" id="id_message" type="text"></textarea><br /><br />
                <input type="submit" value="Poster" />
              </form>

Celui de ma fonction JavaScript :

Code :

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
 
function checkPostLivreDor() {
    var xhr = getXhr();
    var pseudo = document.getElementById('id_pseudo');
    var message = document.getElementById('id_message');
    // Fonction de retour de 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){
		    alert(xhr.responseText);
		}
	}
    // Appel asynchrone
    xhr.open("POST", "/site/requetes/ajoutlivredor.php", true);
    xhr.send("pseudo=" + pseudo.value + "&message=" + message.value);
    return false;
}

Et enfin celui de la page ajoutlivredor.php qui fera plus tard des requetes SQL :

Code :

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

1
2
3
4
 
<?php
	echo "test !";
?>

NB : débutant en AJAX, est-ce ici une bonne utilisation ?

frizou11 · 18/05/2008, 17h16

Petite info supplémentaire :
J'ai utilisé la méthode GET et ça marche mais seulement sous IE... pas sous Firefox

Quelqu'un a une solution ?

4R416N33 · 18/05/2008, 17h30

En se calquant sur un cours developpez.com, on obtient le code suivant.

Je ne saurai te dire pourquoi il y a un pb avec le onsubmit sur le form, mais vu que ton form est géré par ajax, autant ne pas faire de form

Pour ton html

Code :

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
46
47
48
49
 
<!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" lang="fr">
 
<head>
	<title>Exemple 4</title>
 
	<script>
function checkPostLivreDor()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "reponse.php", true);
    xhr.send("pseudo=" + document.getElementById("id_pseudo").value + "&message=" + document.getElementById("id_message").value);
}
 
function alert_ajax(xhr)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
}
	</script>
</head>
<body>
<p>Pseudo</p><br />
<input name="pseudo" id="id_pseudo" type="text" /><br /><br />
<p>Message</p><br />
<textarea rows="5" cols="70" name="message" id="id_message" type="text"></textarea><br /><br />
<input type="button" value="Poster" onClick="checkPostLivreDor()" />
</form>
 
</body>
</html>

Pour ton php

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
	echo "<donnee>Test !</donnee>\n";
echo "</exemple>\n";
 
?>

frizou11 · 18/05/2008, 18h06

En effet c'est le <form> qui posait problème.
En le supprimant, cela marche.

Merci.

4R416N33 · 18/05/2008, 18h22

Mais derien

18/05/2008, 17h16	#2
frizou11 Membre habitué Inscription : avril 2006 Messages : 266 Détails du profil Informations forums : Inscription : avril 2006 Messages : 266 Points : 119 Points : 119	Petite info supplémentaire : J'ai utilisé la méthode GET et ça marche mais seulement sous IE... pas sous Firefox Quelqu'un a une solution ?
	00

18/05/2008, 18h06	#4
frizou11 Membre habitué Inscription : avril 2006 Messages : 266 Détails du profil Informations forums : Inscription : avril 2006 Messages : 266 Points : 119 Points : 119	En effet c'est le <form> qui posait problème. En le supprimant, cela marche. Merci.
	00

18/05/2008, 18h22	#5
4R416N33 Membre habitué Développeur Web Inscription : juillet 2007 Messages : 112 Détails du profil Informations personnelles : Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : juillet 2007 Messages : 112 Points : 109 Points : 109	Mais derien
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email