Récup valeur dans un formulaire avec Ajax

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

voici les différents morceaux de codes :

<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>

<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>

<?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;
?>

Modifié par phico (14 May 2013 - 18:10)

Merci pour ta réponse Benj

Pour rappel, dans un formulaire, je fais appel à une rédé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 :

ReferenceError: code_pro is not defined

var queryString = "?code_prod=" + code_pro;


Voici les sources actuelles :

<?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;
?>

	<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>

<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>

ReferenceError: code_pro is not defined
Que comprends tu dans cette phrase ?
Maintenant regarde bien ton code ci-dessous et trouve l'erreur :

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

Des étapes simples pour débuger un code.
1) Isoler le problème (via un console.log('mavaribale') en js)
2) Comprendre le problème
3) Résoudre le problème


Pas la peine de remettre tous ton code à chaque fois. Surtout la partie php qui ne te pose pas de problème.
Modifié par benj (15 May 2013 - 14:34)

dsl sur ce coup là ...

Voilà, j'ai corrigé mon code, je reçois bien le libellé. Un grand merci à toi