[AJAX] Récupérer valeurs dans formulaire

Version imprimable

Bonjour,

Je débute en Ajax et je tente de réaliser le traitement suivant :

Après avoir encodé la référence d'un produit, j'essaye d'afficher son libellé (plus tard son prix) via un script Ajax et un appel php vers ma db.

çà ne fonctionne pas alors que le module php me donne le bon résultat.

Merci de m'aider :)

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
 
<script language="javascript" type="text/javascript">
<!-- 
function getXhr()
{
//Browser Support Code
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest(); 
else 
	if(window.ActiveXObject)
	{ // Internet Explorer 
	   try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
		                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
	}
	else 
	{ 
	// XMLHttpRequest non supporté par le navigateur 
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	xhr = false; 
	} 
    return xhr
}
 
 
 
function ajax_fct(){
	var xhr = getXhr()
 
 
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function()
	{
		if(ajaxRequest.readyState == 4){
			document.myForm.libelle.value = ajaxRequest.responseText;
		}
	}
	var code_prod = document.getElementByName('code_prod').value;
 
	var queryString = "?code_prod=" + code_pro;
	ajaxRequest.open("GET", "rech_infos.php" + queryString, true);
	ajaxRequest.send(null); 
}
 
//-->
</script>

14/05/2013, 19h42
Invité

Bonjour,

Il faudrais voir pas quelle saisie,ou événement AJAX est appelé :roll:
Donnes nous plus de code de cette page et celui du PHP appelé

Voici les codes demandés Christel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<form name='myform' action='' method='post'>
		<p><label>Client :</label><input type='text' name='numero' id='cherche'></input>
		<label>Nom :</label><input type='text' id='nom' name='nom' ></input>
		<label>Prénom :</label><input type='text' id='prenom' name='prenom' ></input></p>
 
			<p>
			<label>Référence :</label><input type='text' name='code_prod' id='rech_prod2' onkeyup='ajax_fct()' ></input>
			<label>Libellé :</label><input type='text'  name='libelle' ></input>
			<label>Prix :</label><input type='text' name='prix' ></input>
			<label>Qté :</label><input type='text' name='qte' onkeyup = "javascript:calcul('tot_lg');"></input>
			<label>Total :</label><input type='text' class='tot_lg' name='tot_lg'  value="<?PHP echo $tot_lg ?>" readonly></input>
			</p>
 
 
		<p>
		<label>Total commande :</label><input type='text' name='tot_cmd' id='tot_cmd' readonly></input>
		</p>
 
	</form>

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
 
<script language="javascript" type="text/javascript">
<!-- 
function getXhr()
{
//Browser Support Code
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest(); 
else 
	if(window.ActiveXObject)
	{ // Internet Explorer 
	   try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
		                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
	}
	else 
	{ 
	// XMLHttpRequest non supporté par le navigateur 
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	xhr = false; 
	} 
    return xhr
}
 
 
 
function ajax_fct(){
	var xhr = getXhr()
 
 
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function()
	{
		if(ajaxRequest.readyState == 4){
			document.myForm.libelle.value = ajaxRequest.responseText;
		}
	}
	var code_prod = document.getElementByName('code_prod').value;
 
	var queryString = "?code_prod=" + code_pro;
	ajaxRequest.open("GET", "rech_infos.php" + queryString, true);
	ajaxRequest.send(null); 
}
 
//-->
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php 
include ("./include/mes_fonctions.php"); 
open_db();
 
$term=$_GET["code_prod"];  
echo $term;
$query=mysql_query("SELECT * FROM catalogue where cat_ref = $term "); 
echo $query;
if ( ! $query )
	die ('mysql_query error SELECT catalogue' . mysql_error());
 
 
$row=mysql_fetch_array($query);
 
echo $row['cat_libelle'];
 
exit;
?>

14/05/2013, 23h55
Invité

Ton code est un vrais mystère !
par exemple d'ou vient $tot_lg 8O
D'autre part l'appel AJAX n'est pas conforme, revois taa syntaxe
15/05/2013, 06h04
andry.aime
Bonjour,

Citation:

var xhr = getXhr()

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
Code:

1 2 3 4 5 var ajaxRequest= getXhr() // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function()
Citation:

var code_prod = document.getElementByName('code_prod').value;

c'est getElementsByName qui existe et la méthode retourne une collection, donc il faut préciser l'indice. Ton input a un id, utilise getElementById().

A+.
15/05/2013, 06h08
andry.aime

Citation:

<form name='myform' action='' method='post'>

Citation:

document.myForm.libelle.value = ajaxRequest.responseText;

Javascript est sensible à la casse.

Citation:

if(ajaxRequest.readyState == 4){
document.myForm.libelle.value = ajaxRequest.responseText;
}

Tu dois tester aussi si la requête Ajax a bien aboutit ou bien une erreur est servenue.

A+.

Merci pour vos réponses. :ccool:

J'ai adapté les codes et simplifié au maximum. Dans un formulaire, je fais appel à une référence produit et je vais rechercher son libellé via un appel Ajax. Et ce libellé ne s'affiche pas alors que le code php est fonctionnel.

Dans firebug, j'ai l'erreur :

Citation:

ReferenceError: code_pro is not defined

var queryString = "?code_prod=" + code_pro;

Voici mes codes actuels tenant compte des correctifs demandés :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
	<form name='myForm' action='' method='post'>
		<p>
		<label>Client :</label><input type='text' name='numero' id='cherche'></input>
		<label>Nom :</label><input type='text' id='nom' name='nom' ></input>
		<label>Prénom :</label><input type='text' id='prenom' name='prenom' ></input>
		</p>
 
			<p>
			<label>Référence :</label><input type='text' name='code_prod' id='rech_prod2' onkeyup='ajax_fct()' ></input>
			<label>Libellé :</label><input type='text'  name='libelle' ></input>
			</p>
 
 
	</form>

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
 
<script language="javascript" type="text/javascript">
<!-- 
function getXhr()
{
//Browser Support Code
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest(); 
else 
	if(window.ActiveXObject)
	{ // Internet Explorer 
	   try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
		                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
	}
	else 
	{ 
	// XMLHttpRequest non supporté par le navigateur 
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	xhr = false; 
	} 
    return xhr
}
 
 
 
function ajax_fct(){
 
	var ajaxRequest= getXhr()
 
 
 
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function()
	{
		if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
		{
			document.myForm.libelle.value = ajaxRequest.responseText;
		}
	}
	var code_prod = document.getElementById('rech_prod2').value;
 
	var queryString = "?code_prod=" + code_pro;
	ajaxRequest.open("GET", "rech_infos.php" + queryString, true);
	ajaxRequest.send(null); 
}
 
//-->
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php 
include ("./include/mes_fonctions.php"); 
open_db();
 
$term=$_GET["code_prod"];  
echo $term;
$query=mysql_query("SELECT * FROM catalogue where cat_ref = $term "); 
echo $query;
if ( ! $query )
	die ('mysql_query error SELECT catalogue' . mysql_error());
 
 
$row=mysql_fetch_array($query);
 
echo $row['cat_libelle'];
 
exit;
?>

Une idée ?

15/05/2013, 14h40
Bovino
Fais attention à tes nommages ! Ca ne devrait pas être à nous de faire ce type de debug, d'autant que le message d'erreur est suffisamment explicite !!!
Code:

1 2 3 var code_prod = document.getElementById('rech_prod2').value; var queryString = "?code_prod=" + code_pro;

Bonjour,
La syntaxe la plus simple est de ce type
Code:

1 2 3 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send('LaValeur='+LaValeur);
A toi de l'adapter a ton cas ;)

@christele_r
Il travaille avec la méthode GET mais pas POST.

Sinon, il est aussi préférable de tester s'il n'y a pas d'erreur HTTP

Citation:

Code:

1
2
3
4
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
		{
			document.myForm.libelle.value = ajaxRequest.responseText;
		}

Code:

1
2
3
4
5
6
7
if (ajaxRequest.readyState == 4 )
		{
		   if (ajaxRequest.status == 200 || ajaxRequest.status == 0)
			{document.myForm.libelle.value = ajaxRequest.responseText;}
		   else
		       {alert(ajaxRequest.status + " : " + ajaxRaquest.statusText);}
		}

15/05/2013, 14h58
Bovino

Oui, mais là, son problème, c'est surtout qu'il essaye d'envoyer le contenu de la variable code_pro alors qu'il a défini code_prod !
Donc Reference Error et on ne va pas plus loin. ;)
15/05/2013, 15h11
andry.aime

Citation:

Envoyé par Bovino

Oui, mais là, son problème, c'est surtout qu'il essaye d'envoyer le contenu de la variable code_pro alors qu'il a défini code_prod !
Donc Reference Error et on ne va pas plus loin. ;)

Oui tu l'as déjà donné la solution mais c'est une précaution ;).
15/05/2013, 16h02
phico04

dsl, j'aurais dû être plus attentif. :oops:

Merci pour tous les conseils :ccool: