Ajax/php pour remplir des champs texte

loulou -  
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,



je ne suis pas du tout familier avec le langage ajax ( et donc js aussi) mais voilà on m'a fait comprendre que pour mon problème, ajax est très recommendé. Voilà je souhaite réaliser un configurateur de pc en ligne, pour cela l'utilsateur doit preciser par le biais de 6 listes déroulantes le choix de ses composants (dd, ram, proc, carte mere....), ces 6 listes sont alimentés par 6 tables mysql, chaque table ayant deux champ ref et prix, je recupere bien sur la champ ref pour mes listes, voilà mon probleme, j'aimerais que tout de suite après avoir choisi un composant, le prix de ce composant là soit affiché à coté dans un champ texte, ce champs est bien sur alimenté par le table correspondante. Pouvez vous s'il vous plait m'indiquez un script simple ? Voici le script de mon configurateur. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>

<body>
<form name="form1" method="get" action="inser.php">
														  <table width="227" height="194" border="1">
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Carte Mere</font></th>
														      <td><label>
														        <select name="cartem" id="cartem">
                                                                <?php
																	$SQL = "SELECT nom FROM cartesm";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input name="pcartem" type="text" id="pcartesm" value="" readonly="readonly">
													          </label></td>
													        </tr>
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Processeur</font></th>
														      <td><label>
														        <select name="proc" id="proc">
                                                                <?php
																	$SQL = "SELECT nom FROM proc";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input type="text" name="pcproc" id="pcproc">
													          </label></td>
													        </tr>
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">RAM</font></th>
														      <td><label>
														        <select name="ram" id="ram">
                                                                <?php
																	$SQL = "SELECT nom FROM ram";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input type="text" name="pcram" id="pcram">
													          </label></td>
													        </tr>
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Disque Dur</font></th>
														      <td><label>
														        <select name="DD" id="DD">
                                                                <?php
																	$SQL = "SELECT nom FROM dd";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input type="text" name="pcdd" id="pcdd">
													          </label></td>
													        </tr>
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Carte Video</font></th>
														      <td><label>
														        <select name="cartev" id="cartev">
                                                                <?php
																	$SQL = "SELECT nom FROM cartesv";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input type="text" name="pccartev" id="pccartev">
													          </label></td>
													        </tr>
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Lecteur</font></th>
														      <td><label>
														        <select name="lec" id="lec">
                                                                <?php
																	$SQL = "SELECT nom FROM lecteur";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option>".$val["nom"]."</option>\n";
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input type="text" name="pclec" id="pclec">
													          </label></td>
													        </tr>
														    <tr>
														      <th colspan="2" scope="row">Prix Total</th>
														      <td><label>
														        <input type="text" name="prixt" id="prixt" />
													          </label></td>
													        </tr>
													      </table>
														  <p>
														    <label>
														      <input type="submit" name="submit" id="submit" value="Envoyer">
													        </label>
  </p>
</form>
</body>
</html>


Pouvez vous m'indiquez des pistes s'il vous plait ?

18 réponses

Réponse 1 / 18
Utilisateur anonyme
 
Bonsoir,

t'es champs select doivent être remplies avec le chargement de la page par le biais de php classique.

pour le ajax j'ai vient de faire une fonction javascript simple qui appelle ajax :

function ajax(variable_envoyee, nom_post, page_traitement, id_affiche_reponse){
var req = null;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("XHR not created");
}
}
}
var data = nom_post + "=" + variable_envoyee;
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
var element = document.getElementById(id_affiche_reponse);
element.innerHTML = req.responseText;
}
else{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", page_traitement, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(data);
}
1
Réponse 2 / 18
Utilisateur anonyme
 
Si j'ai bien compris, lorque tu clique sur un champs select, son prix doit s'afficher dans le champ texte a coté et le prix total doit changé ?
1
Réponse 3 / 18
Utilisateur anonyme
 
Pour inclure le code que je t'ai passé, il faut que tu construises un fichier .js que tu nommes comme tu veux et tu y place mon code.

Et dans ta page, tu place :

<script type="text/javascript" src="nomdufichier.js"></script> dans le head

je m'exprime bien ?
1
Réponse 4 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
je t'ai fait pour une liste tu adaptes pour les autres
j'ai mis aussi la fct JS dans le Head 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
function appel_ajax(page_traitement,table_a_lire,id_lire,id_ecrire){
var req = null;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("XHR not created");
}
}
}

req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
var element = document.getElementById(id_affiche_reponse);
//on ecrit la réponse dans l'input correspondant
var input_rep=document.getElementById(id_ecrire);
input_rep.value = req.responseText;
}
else{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", page_traitement, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var obj=document.getElementById(id_lire);
//on envoie au script php la table à lire dans la BDD et la valeur selectionnée dans la liste
var data = 'table_a_lire='+table_a_lire+'&val_selectionnee='+obj.value;
req.send(data);
}
</script>
</head>

<body>
<form name="form1" method="get" action="inser.php">
														  <table width="227" height="194" border="1">
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Carte Mere</font></th>
														      <td><label>
														        <select name="cartem" id="cartem" onChange="appel_ajax('repPhpAjax.php','cartesm','cartem','pcartesm');">
                                                                <?php
																	//ci dessus les parametres d'appel de la fonction (nom_du_scriptPHP,nom de la table a lire,id de la liste, id de l'input a ecrire)
																		//donc a adapter à chacune des listes
																	$SQL = "SELECT nom FROM cartesm";
																	//cette ligne pour avoir obligatoirement un changement de choix pour appeler la fonction
																	echo "<option value=''>-- choisissez--</option>\n";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option value='".$val["nom"]."'>".$val['nom']."</option>\n";
																		// attention il faut obligatoirement une value= dans les lignes d'option
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input name="pcartem" type="text" id="pcartesm" value="" readonly="readonly">
													          </label></td>
													        </tr>
..........................


et le code du script php 

<?php
//////// script repPhpAjax.php  //////

//recup des valeurs envoyées par Ajax
$table_a_lire=$_POST['table_a_lire'];
$val_selectionnee=$_POST['val_selectionnee'];

//tu fais la connexion a la base....

//puis
$SQL = "SELECT prix FROM ".$table_a_lire." WHERE nom='".$val_selectionnee."' ";
$res = mysql_query($SQL);
$donnee=mysql_fetch_assoc($res);
$prix=$donnee['prix'];

//et on envoie la réponse à Ajax:

echo $prix;
?>
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 18
loulou
 
merci de prendre le temps de m'aider :)
0
Réponse 6 / 18
loulou
 
Merci pourrais tu m'indiquer comment l'integrer dans mon script de formulaire ci dessus ? Car je n'ai pas de notion JS/Ajax
0
Réponse 7 / 18
loulou
 
Oui c'est bel et bien ça.
0
Réponse 8 / 18
loulou
 
Oui jusque là pas de problème. Qu'est ce que je dois faire après ?
0
Réponse 9 / 18
loulou
 
Je vous remercie du fond du coeur les gars, je me plonge tout de suite dans cet ocean de code :) merci encore une fois.
0
Réponse 10 / 18
loulou
 
Alain est ce que s'il te plait tu pourrais mettre aussi le nom de la base et de la table pour cette première liste ? Ma base s'appelle "pfe2", ma table s'appelle "cartesm", elle comporte deux champs, le premier est 'ref' c'est de lui qu'on récupere les valeurs des ref pour les mettre dans liste, mon deuxième champ s'appelle prix, c'est lui qu'on va chercher pour le mettre dans la zone de texte
0
Réponse 11 / 18
loulou
 
J'ai changé le script php pour l'adapter à ma situation voilà à quoi ça ressemble mainant 
<?php
//////// script repPhpAjax.php  //////

//recup des valeurs envoyées par Ajax
$cartesm=$_POST['cartesm'];
$val_selectionnee=$_POST['val_selectionnee'];

//tu fais la connexion a la base....
$cnx=mysql_connect("localhost","root","")or die ("connexion impossible.");

$db=mysql_select_db("comosants")or die ("base de données non accessible"); 
//puis
$SQL = "SELECT prix FROM ".$cartesm." WHERE nom='".$val_selectionnee."' ";
$res = mysql_query($SQL);
$donnee=mysql_fetch_assoc($res);
$prix=$donnee['prix'];

//et on envoie la réponse à Ajax:

echo $prix;
?>


et pour le script principale j'ai changé tous les tables_a_lire par cartesm, voilà ce que ça donne 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
function appel_ajax(page_traitement,table_a_lire,id_lire,id_ecrire){
var req = null;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("XHR not created");
}
}
}

req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
var element = document.getElementById(id_affiche_reponse);
//on ecrit la réponse dans l'input correspondant
var input_rep=document.getElementById(id_ecrire);
input_rep.value = req.responseText;
}
else{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", page_traitement, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var obj=document.getElementById(id_lire);
//on envoie au script php la table à lire dans la BDD et la valeur selectionnée dans la liste
var data = 'cartesm='+cartesm+'&val_selectionnee='+obj.value;
req.send(data);
}
</script>
</head>

<body>
<form name="form1" method="get" action="inser.php">
														  <table width="227" height="194" border="1">
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Carte Mere</font></th>
														      <td><label>
														        <select name="cartem" id="cartem" onChange="appel_ajax('repPhpAjax.php','cartesm','cartem','pcartesm');">
                                                                <?php
																	//ci dessus les parametres d'appel de la fonction (nom_du_scriptPHP,nom de la table a lire,id de la liste, id de l'input a ecrire)
																		//donc a adapter à chacune des listes
																	$SQL = "SELECT nom FROM cartesm";
																	//cette ligne pour avoir obligatoirement un changement de choix pour appeler la fonction
																	echo "<option value=''>-- choisissez--</option>\n";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option value='".$val["nom"]."'>".$val['nom']."</option>\n";
																		// attention il faut obligatoirement une value= dans les lignes d'option
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input name="pcartem" type="text" id="pcartesm" value="" readonly="readonly">
													          </label></td>
													        </tr>


Mais ma liste n'est toujours pas alimenté par la table cartesm de la base comosants
0
Réponse 12 / 18
loulou
 
je viens de me rendre compte qu'il n'y avait en fait rien à changer si ce n'est mettre les commandes de connexion à la base dans le script php mais la liste n'est toujours pas alimenté, j'aimerais aussi savoir comment faire pour le dernier champ du prix total.
0
Réponse 13 / 18
loulou
 
je viens de mettre les commandes de connexion à la base dans le grand script et maintenant la liste est effectivement alimenté par la base mais le prix ne se charge pas.
0
Réponse 14 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
il ne faut pas changer $table_a_lire, c'est ce qui permet d'avoir un script php qui sert pour toutes les listes donc toutes les tables

il suffit dans l'appel de la fct JS appel_ajax(...)
de mettre en argument le nom de la table correspondant à la liste

ensuite il y a un truc bizarre, tu dis que dans tes tables, tu as les champs ref et prix hors tes requettes sont: $SQL = "SELECT nom FROM cartesm";

et echo "<option value='".$val["nom"]."'>".$val['nom']."</option>\n";

donc 'est nom ou ref ?
0
Réponse 15 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
var data = 'cartesm='+cartesm+'&val_selectionnee='+obj.value;


remet comme j'avais mis
0
Réponse 16 / 18
loulou
 
Oui c bon ca je l'ai fait alain, est ce que c'est normal que la liste ne soit alimenté que si je fais la connexion dans le grand script ? le champ du prix ne s'affiche toujours pas par ailleur
0
Réponse 17 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
bien sur qu'il faut faire la connexion à la BDD dans le"grand script" sinon comment veux tu faire des requettes sql pour alimenter les listes

voir commentaires nom de ta base "comosants" ou "composants" ??

j'ai aussi mis des boites d'alert pour voir ce qui se passe

(par contre désolé mais je part une semaine en vacances..) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
function appel_ajax(page_traitement,table_a_lire,id_lire,id_ecrire){
var req = null;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("XHR not created");
}
}
}

req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
var element = document.getElementById(id_affiche_reponse);

//////// ici on va mettre une boite d'alerte pour voir ce qu'on reçoit du script repPhpAjax.php
//tu l'enlevera après
alert("Valeur renvoyées par le script PHP: "+req.responseText);

//on ecrit la réponse dans l'input correspondant
var input_rep=document.getElementById(id_ecrire);
input_rep.value = req.responseText;
}
else{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", page_traitement, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var obj=document.getElementById(id_lire);
//on envoie au script php la table à lire dans la BDD et la valeur selectionnée dans la liste
var data = 'table_a_lire='+table_a_lire+'&val_selectionnee='+obj.value;
///////// ici on va mettre une boite d'alerte pour voir ce qui part
//tu l'enlevera après
alert("Données envoyée par AJAX: "+data);
req.send(data);
}
</script>
</head>

<body>
<?php

//connexion à la BDD
$cnx=mysql_connect("localhost","root","")or die ("connexion impossible.");
//est ce normal qu'elle s'appelle comosants ? ce ne serait pas plutôt composants ??
$db=mysql_select_db("comosants")or die ("base de données non accessible"); 
?>
<form name="form1" method="get" action="inser.php">
														  <table width="227" height="194" border="1">
														    <tr>
														      <th scope="row"><font face="Verdana" style="font-size: 8pt; text-align: left;" color="#808080">Carte Mere</font></th>
														      <td><label>
														        <select name="cartem" id="cartem" onChange="appel_ajax('repPhpAjax.php','cartesm','cartem','pcartesm');">
                                                                <?php
																	//ci dessus les parametres d'appel de la fonction (nom_du_scriptPHP,nom de la table a lire,id de la liste, id de l'input a ecrire)
																		//donc a adapter à chacune des listes
																	$SQL = "SELECT nom FROM cartesm";
																	//cette ligne pour avoir obligatoirement un changement de choix pour appeler la fonction
																	echo "<option value=''>-- choisissez--</option>\n";
																	$res = mysql_query($SQL);
																	while($val=mysql_fetch_array($res)) {
   																	echo "<option value='".$val["nom"]."'>".$val['nom']."</option>\n";
																		// attention il faut obligatoirement une value= dans les lignes d'option
																	}
																	?>
													            </select>
													          </label></td>
														      <td><label>
														        <input name="pcartem" type="text" id="pcartesm" value="" readonly="readonly">
													          </label></td>
													        </tr>
..........................

pour la deuxieme liste le select sera:
 <select name="proc" id="proc" onChange="appel_ajax('repPhpAjax.php','proc','proc','pcproc');">





et le code du script php

<?php
//////// script repPhpAjax.php  //////

//recup des valeurs envoyées par Ajax
$table_a_lire=$_POST['table_a_lire'];
$val_selectionnee=$_POST['val_selectionnee'];
//connexion à la BDD
$cnx=mysql_connect("localhost","root","")or die ("connexion impossible.");
//est ce normal qu'elle s'appelle comosants ? ce ne serait pas plutôt composants ??
$db=mysql_select_db("comosants")or die ("base de données non accessible"); 


//puis
$SQL = "SELECT prix FROM ".$table_a_lire." WHERE nom='".$val_selectionnee."' ";
$res = mysql_query($SQL);
$donnee=mysql_fetch_assoc($res);
$prix=$donnee['prix'];

//fermeture connexion base
mysql_close($cnx);
//et on envoie la réponse à Ajax:

echo $prix;
?>
0
Réponse 18 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
je viens d eme rendre compte qu'il y a cette ligne en trop:

var element = document.getElementById(id_affiche_reponse);

dans la fonction JS

ça devait planter la fonction
0

Discussions similaires

Actualistation automatique des champs Word
Utilisateur anonyme -
UnHommeHeureux -

25 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Excel formule : savoir si une cellule contient partie texte
plunderer007 -
francois -

14 réponses
Echec mise à jour champs Word
flo33 -
flo33 -

2 réponses
probléme avec ajax svp
marwen109 -
Groarh -

4 réponses