[Resolu]Envoyer un formulaire par XMLHTTPrequest

Bonjour !

Voici une suite du topic précédent, ou je parlais de mes malheurs avec XMLhttprequest.

J'arrive maintenant à inclure mes pages comme il le faut, et je m'interresse maintenant aux formulaires.
J'aimerais, à partir d'une page ouverte dans une autre, grace à xmlhttprequest, envoyer les données d'un formulaire vers
une autre page, tout le javascript.

Sur OpenWeb, je lis qu'il est possible de faire des requetes de type Post.

Question donc: j'aimerais envoyer ce formulaire et recevoir la page de confirmation par XMLhttprequest. Comment ?

Voici le contenu du fichier javascript.js :

function sendData(page,div)
{
var content = document.getElementById(div);

if(document.all)
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
else
var XhrObj = new XMLHttpRequest();

XhrObj.open("GET", page);

XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4)
{
content.innerHTML = XhrObj.responseText;
if (document.getElementById('fond'))
{
document.getElementById('fond').style.height = document.body.scrollHeight;
}}
}
XhrObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
XhrObj.send(null);
}
function getFile(page){sendData( page, 'cache');}
function description(page){sendData(page,'description');}

Modifié par Sylvain (08 Sep 2005 - 21:46)

Avec XHRConnection tu fais comme ceci :

	// La fonction qui sera appellée lorsque toutes les informations auront
	// été reçues. Tu y fais ce que tu veux ^^
	var toDoux = function (obj) {
		alert(obj.responseText);
	}

	var XHR = new XHRConnection();
	
	// Données à transmettre au script
	XHR.appendData('variable1', valeurVariable1);
	XHR.appendData('variable2', valeurVariable2);
	
	// On appelle le script en POST et on déclare la fonction de callback
	XHR.sendAndLoad("page.php", "POST", toDoux);

Modifié par solo (07 Sep 2005 - 16:38)

Très gentil à toi de m'avoir répondu aussi vite, mais je ne sais pas trop comment l'implémenter dans mon script et l'utiliser par la suite

C'est que moi et javascript...

Bonjour, Sylvain.

L'objet XHRConnection de solo mérite d'être étudié, pour son aspect multifonctionnel.

Mais pour expérimenter, tu peux continuer avec ce que tu connais déjà depuis hier.

A partir du script existant, tu peux éventuellement créer une nouvelle fonction qui implémente POST et envoie les données en modifiant

XhrObj.open("[b]POST[/b]", page);
XhrObj.send([b]MaRequete[/b]);

Le résultat renvoyé par PHP va aboutir dans content.innerHTML. ça ne change pas.

Les prérequis sont : les requêtes http POST...
Modifié par GeorgesM (07 Sep 2005 - 17:10)

je le rajoute dans le fichier javascript.js , mais ensuite, que dois-je faire ?
Je suis casse-pied, je sais , mais j'ai du mal à comprendre ou tu veux en venir, et à quoi fait référence ce code...

Il y a plusieurs types de requetes http, dont GET et POST.

avec "XhrObj.open("POST", page);" on prépare une requête POST,
et avec "XhrObj.send(MaRequete);" on l'effectue.

MaRequete doir être une chaîne du genre:

"v1=uneValeur&V2=uneAutreValeur"
Modifié par GeorgesM (07 Sep 2005 - 17:54)

Je vais me montrer très neuneu...

Mon fichier javascript.js:

function sendData(page,div)
{
var content = document.getElementById(div);

if(document.all)
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
else
var XhrObj = new XMLHttpRequest();

XhrObj.open("GET", page);

XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4)
{
content.innerHTML = XhrObj.responseText;
if (document.getElementById('fond'))
{
document.getElementById('fond').style.height = document.body.scrollHeight;
}}
}
XhrObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
XhrObj.send(null);
}
function getFile(page){sendData( page, 'cache');}
function description(page){sendData(page,'description');}

Ou-dois-je mettre ces deux lignes ?

Ensuite, dans ma balise <form>, que dois-je mettre dans action="" ?
J'ai deux champs dans mon formulaire: "membre" et "message" et je veux les recuperés sous forme de variable phph $membre et $message; ce que je fais habituellement avec

if ( isset($HTTP_GET_VARS['membre']) || isset($HTTP_POST_VARS['membre']) )
{
	$membre = ( isset($HTTP_POST_VARS['membre']) ) ? htmlspecialchars($HTTP_POST_VARS['membre']) : htmlspecialchars($HTTP_GET_VARS['membre']);
}
else
{
	$membre = '';
}

Désolé
Modifié par Sylvain (07 Sep 2005 - 18:11)

Voilà la fonction modifiée, mais pas testée... A vérifier

function [b]PostData[/b]([b]progPhp[/b],div,[b]data[/b])
{
var content = document.getElementById(div);

if(document.all)
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
else
var XhrObj = new XMLHttpRequest();

[b]XhrObj.open("POST", progPhp);[/b]

XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4)
{
content.innerHTML = XhrObj.responseText;
}
}
XhrObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
[b]XhrObj.send(data);[/b]
}

Maintenant, le plus dur reste à faire... collecter les données du formulaire...
Modifié par GeorgesM (07 Sep 2005 - 18:34)

Il n'y a l'air d'avoir aucune erreur...
Maintenant, j'ai le formulaire, avec deux champs:
"membre" et "message".

Comment envoyer, et surtout collecter les données ?

Dans un formulaire html, les input sont associés à des name.

<form>
<input type="text" [b]name[/b]="data1"/>
<input type="text" [b]name[/b]="data2"/>
<input onclick="collectData()">GO!</input>
</form>

Il faut récupérer les données :

function collectData()
{
s = "";
s = s + "data1=" + document.[b]getElementsByName[/b]("data1")[0].value;
s = s +"&";
s = s + "data2=" + document.[b]getElementsByName[/b]("data2")[0].value;
PostData("prog.php","leDiv",s);
}

C'est tout simple, mais...

1) bien comprendre
2) Réecrire
3) Expérimenter
4) débugger.

Bon courage
Modifié par GeorgesM (08 Sep 2005 - 10:43)

Ca ne marche pas...
Pas d'erreurs, mais les variables ne passent pas ...
Je vais faire d'autres recherches, mais si tu as une idée, n'hésite pas !

Bonjour, Sylvain.

Elle est dure, la route qui mène au DOM...

Ce site (selfhtml) est une mine d'or de références:

http://fr.selfhtml.org/javascript/objets/document.htm#get_elements_by_name

PS: j'ai corrigé un truc du post précédent.
Comme on accède à des éléments par leur nom,
le résultat de getElementsByName est un nodeList,
contrairement à getElementById qui renvoie un domNode.

Amis du chinois, bonjour.
Modifié par GeorgesM (08 Sep 2005 - 10:44)

Lu,

Lorsqu'on définit des actions à faire après complétion de l'opération il faut toujours les spécifier avant de lancer la requête.

J'ai réussi a faire ce que je voulais faire, grace aux docs de GeorgesM et à l'indication de solo (je n'arrivais pas a faire marcher tout ca)

Merci beaucoup !