[AJAX] variable xhr.send

Version imprimable

Bonjour,

J'ai un soucis avec une récupération variable formulaire -> pseudo
Je n'arrive pas à en récupérer la valeur.

Quand je passe la variable (ligne 48) cela fonctionne, mais si je test à la place avec pour exemple en ligne 43 et 44, cela ne renvoi plus rien !

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>AJAX</title>
 
<script type="text/javascript">
/////////////////
// CHANGE PAGE //
/////////////////
function appel()
{
	obj = document.getElementById("requete");
	// ON EFFACE LE CONTENU DU DIV
	obj.innerHTML = "";
	if(window.XMLHttpRequest) // FIREFOX
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
	return(false);
 
	// CONTROLE DE L'ETAT DE LA REQUETE
	xhr_object.onreadystatechange = function()
	{ 
	if(xhr_object.readyState == 4)
	{
     // ON CONTROLE LE STATUS (ERREUR 404, ETC)
	if(xhr_object.status == 200) 
	obj.innerHTML += xhr_object.responseText; 
	else 
	obj.innerHTML +="Error code " + xhr_object.status;
	}
	}; 
 
	// ON APPELLE LA PAGE
	xhr_object.open("POST", "appel_verif.php" , true);
	/* Effectue la requête en envoyant les données : */
	xhr_object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	/* 
	CECI NE FONCTIONNE PAS
		var name = document.getElementById('pseudo').value;
		xhr_object.send("pseudo="+name);
		 */
 
	/* CECI FONCTIONNE */
		xhr_object.send("pseudo=testOK");
 
	}
</script>
 
</head>
<body>
 
<div id="requete">
<form>
<input type="text" name="pseudo" id="pseudo" ><br />
<input type="text" name="email" id="email" ><br />
 
<input name="Envoyer" type="button" onClick="appel()" value="Envoyer">
</form>
</div> <!-- requete -->
 
</body>
</html>

Voici la page appel_verif.php

Code:

1
2
3
4
5
6
7
<form action="" >
<input name="pseudo" type="text" onKeyUp="verifPseudo(this.value)" value="<?php echo $_POST["pseudo"]; ?>" /><br />
<div id="pseudobox"></div>
<input type="text" name="email" onKeyUp="verifEmail(this.value)" />
<div id="emailbox"></div>
<input name="Envoyer" type="button" onClick="appel()" value="Envoyer">
</form>

Je n'ai aucune idée de ce que je rate ni ne comprend.

Merci de vos aides et explications

08/04/2013, 17h21
andry.aime

Bonjour,

Citation:

var name = document.getElementById('pseudo').value;

Citation:

<input name="pseudo" type="text" onKeyUp="verifPseudo(this.value)" value="<?php echo $_POST["pseudo"]; ?>" />

Ton input n'a pas d'id mais de name.

A+.
09/04/2013, 12h55
sphereco
J'ai bien rajouter un id="pseudo" mais cela ne fonctionne pas

l'appel ramène une page vide avec :
Code:

1 2 var name = document.getElementById('pseudo').value; xhr_object.send("pseudo="+name);
alors que avec seulement un passage de variable simple cela fonctionne

Code:

xhr_object.send("pseudo=testOK");

je récupère correctement la varaible testOK et mon form de la page appel_vérif

aie
09/04/2013, 13h10
andry.aime

Essaie de remplacer aussi le nom de variable "name" par autre chose.

A+.
09/04/2013, 13h20
sphereco

aussi essayer, aucun résultat

aussi essayer de remplacer les '' par des "", toujours pareils

Cela y est, j'ai trouvé, cela fonctionne

la variable doit être placée en début de script

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
34
35
36
37
38
39
40
41
<script type="text/javascript">
/////////////////
// CHANGE PAGE //
/////////////////
function appel()
{
	var content = document.getElementById('pseudo').value;
 
	obj = document.getElementById("requete");
	// ON EFFACE LE CONTENU DU DIV
	obj.innerHTML = "";
	if(window.XMLHttpRequest) // FIREFOX
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
	return(false);
 
	// CONTROLE DE L'ETAT DE LA REQUETE
	xhr_object.onreadystatechange = function()
	{ 
	if(xhr_object.readyState == 4)
	{
     // ON CONTROLE LE STATUS (ERREUR 404, ETC)
	if(xhr_object.status == 200) 
	obj.innerHTML += xhr_object.responseText; 
	else 
	obj.innerHTML +="Error code " + xhr_object.status;
	}
	}; 
 
	// ON APPELLE LA PAGE
	xhr_object.open("POST", "appel_verif.php" , true);
	/* Effectue la requête en envoyant les données : */
	xhr_object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	/* Envoi de la variable */
	xhr_object.send("pseudo=" + content);
 
	}
</script>

Merci