[AJAX] AJAX et les FORM

Version imprimable

Bonjour.

Voici mon probleme:

Je voudrai pouvoir envoyé un mail par mon site web, mon site est basé sur ajax, chaque lien fait une requête... etc.. Vous l'avez bien compris.

Tout se passé bien, les balises que j'envoyé dans les requete était bien interprété. Mais voici venir le <form> qui casse tout mes espoirs.

Voici le code php.

<?php

Code:

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
 
echo 'debut';
echo '<table width="500" border="0" cellspacing="0" cellpadding="0">
<form action="envoi.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire">
<tr>                
<td colspan="3">Envoyer un message</td>
</tr>
<tr>
<td><div align="right">Votre nom</div></td>
<td colspan="2"><input type="text" name="nom" size="45" maxlength="100"></td>
</tr>
<tr>                
<td width="17%"><div align="right">Votre mail</div></td>
<td colspan="2"><input type="text" name="mail" size="45" maxlength="100"></td>
</tr>
<tr>                
<td><div align="right">Sujet :</div></td>
<td colspan="2"><input type="text" name="objet" size="45" maxlength="120"></td>
</tr>
<tr>                
<td><div align="right">Message :</div></td>
<td colspan="2"><textarea name="message" cols="50" rows="10"></textarea></td>
</tr>
<tr>                
<td></td>
<td width="42%"><center><input type="reset" name="Submit" value="Réinitialiser le formulaire"></center></td>
<td width="41%"><center><input type="submit" name="Submit" value="Envoyer"></center></td>
</tr>
</form>
</table>';
 
?>

Le JS:

Code:

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
 
 
 function ajax(url)
{
    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() { addtodiv(xhr); };
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", url, true);
    xhr.send(null);
}
 
function addtodiv(xhr)
{
 
	var docXML= xhr.responseText;
	document.getElementById("dData").innerHTML = docXML;
 
 
 
}

Et le HTML:

Code:

1
2
3
4
 
<a class="nouscontacter" onclick="javascript:ajax('./../php/contact.php');" href="#" >► Nous contacter ◄</a>
 
<div id="dData" style="margin-top: 100px; margin-left: 25px; margin-right: 25px;" ></div>

Donc j'ai fait plusieur petit teste:
- Si je met dans le code php, juste un tableau avec un form et un imput simple dedans cela fonctionne.
- Au niveau de la place que cela prend, ca fonctionne aussi: j'ai fait une page identique mais static, avec un include 'contact.php'; et ca fonctionne aussi.

Je ne sais plus trop quoi faire, merci de m'aidé.

Titioux.

Attention tu as une erreur dans ton Ajax ;)
N'oubli pas le readState==4

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 function ajax(url)
{
    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()
    {
      if (xhr.readyState == 4)
        addtodiv(xhr);
    }
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", url, true);
    xhr.send(null);
}

Autrement je n'ai pas très bien compris le problème que tu rencontres :?

16/04/2008, 12h31
titioux

Merci ca marche.
16/04/2008, 12h34
titioux

Un petite dernière chose.

Je voudrai récupéré les valeur des inputs directement dans la même page généré par AJAX. Quand on clic sur le bouton ca récupère les valeurs et les affiché.

J'ai pensé a un équivalant a getelementbyid() du JS en PHP, mais je ne connais pas assez bien.

Ou alors a l'envoie des valeurs au serveur par ajax mais la non plus je vois pas trop comment.

Merci d'avance
Titioux.

aprés quelque recherche j'ai fini par faire ca:

JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function contactajax(){
	 var xhr=null;
	 var data="";
	 var docXML
	 data = "nom="+document.getElementById("nom").value+"&prenom="+document.getElementById("prenom").value+"&email="+document.getElementById("email").value+"&sujet="+document.getElementById("sujet").value+"&message="+document.getElementById("message").value;	
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	xhr.open("POST", "./../php/send.php", true);
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { 
	if (xhr.readyState == 4){
	docXML= xhr.responseText;
	document.getElementById("resultat").innerHTML = docXML;}
	}
    xhr.send(data);
}

le PHP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
$nom=$_POST["nom"];
$prenom=$_POST["prenom"];
$email=$_POST["email"];
$sujet=$_POST["sujet"];
$message=$_POST["message"];
 
echo '<br />nom='.$nom;
echo '<br />prenom='.$nom;
echo '<br />email='.$nom;
echo '<br />sujet='.$nom;
echo '<br />message='.$nom;
 
echo '<br />debut<br />';
	 echo "Données reçues en POST:".$_POST; 
   foreach($_POST as $v) {
   echo $v;
    echo strrev(($v)).":"; }
 
echo '<br />fin';

le html:

Code:

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
 
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="formulaire"><table>
<tr>                
<td colspan="3"><center><h4>Nous envoyer un message</h4></center><br /></td>
</tr>
<tr>
<td><div align="right">Nom  : </div></td>
<td colspan="2"><input type="text" onkeyup="javascript:controltextnom(this,\'imgnom\');" id="nom" name="nom" size="45" maxlength="100" value=""><img width="15px" height="15px" src="../images/tickrouge.png" id="imgnom" name="imgnom" alt="tick rouge" /></td>
</tr>
<tr>
<td><div align="right">Prenom  : </div></td>
<td colspan="2"><input type="text" onkeyup="javascript:controltextprenom(this,\'imgprenom\');" id="prenom" name="prenom" size="45" maxlength="100" value=""><img src="../images/tickrouge.png" width="15px" height="15px" id="imgprenom" name="imgprenom" alt="tick rouge" /></td>
</tr>
<tr>                
<td width="20%"><div align="right">Votre mail  : </div></td>
<td colspan="2"><input type="text" id="email" name="email" size="45" maxlength="100" onkeyup="javascript:controlmail(this);"><img src="../images/tickrouge.png" width="15px" height="15px" id="imgemail" name="imgemail" alt="tick rouge" /></td>
</tr>
<tr>                
<td><div align="right">Sujet  : </div></td>
<td colspan="2"><input type="text" name="sujet" id="sujet" size="45" maxlength="120" onkeyup="javascript:controlvidesujet(this, \'imgsujet\');"><img src="../images/tickrouge.png" width="15px" height="15px" id="imgsujet" name="imgsujet" alt="tick rouge" /></td>
</tr>
<tr>                
<td><div align="right">Message : </div></td>
<td colspan="2"><textarea name="message" id="message" cols="50" rows="10" maxlength="300" onkeyup="javascript:controlvidemessage(this, \'imgmessage\');"></textarea><img style="position: absolute; top:auto; left: auto;" src="../images/tickrouge.png" width="15px" height="15px" id="imgmessage" name="imgmessage" alt="tick rouge" /></td>
</tr>
<tr>                
<td></td>
<td width="42%"><center><input type="buttom" onclick="javascript:init();" name="Submit" value="Réinitialiser le formulaire"></center></td>
<td width="41%"><center><input type="buttom" onclick="javascript:contactajax();"  id="envoyer" name="envoyer"  value="Envoyer"></center></td>
</tr></table>
</form>
 
<center><div id="resultat" ></div></center>

Voici le resultat:
Notice: Undefined index: nom in E:\logiciel\EasyPHP 2.0b1\www\accessolaire\php\send.php on line 3

Notice: Undefined index: prenom in E:\logiciel\EasyPHP 2.0b1\www\accessolaire\php\send.php on line 4

Notice: Undefined index: email in E:\logiciel\EasyPHP 2.0b1\www\accessolaire\php\send.php on line 5

Notice: Undefined index: sujet in E:\logiciel\EasyPHP 2.0b1\www\accessolaire\php\send.php on line 6

Notice: Undefined index: message in E:\logiciel\EasyPHP 2.0b1\www\accessolaire\php\send.php on line 7

nom=
prenom=
email=
sujet=
message=
debut
Données reçues en POST:Array
fin

Donc voila je n'arrive pas a récupéré les valeurs du POST. J'ai regardé sur ce forum mais aucun solution a mon probleme.

Merci de m'aidé.
titioux.

17/04/2008, 09h50
DoubleU

Il te manque ce header dans ta requete:

Code:

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");