[AJAX] Ajax PHP input

Version imprimable

Bonjour,

Je débute en Ajax, je veux souhaite finaliser une appli avec Ajax.
J'ai une application en PHP, avec un formulaire promotion.
Le formulaire compporte : titre, article, quelle genre de promotion et enfin
un tableau avec code article, libellé, prix, qte et ttc.

J'ai besoin un peu d'aide pour fininaliser ce tableau.
Je veux qd on saisie un code article, le libellé, prix, qte=1, et ttc s'affichent ds input text.
La base de données mysql.

encore merci,

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
function request(oInput) {
	var value = oInput.options[Input.InputIndex].value;
	var xhr   = getXMLHttpRequest();
 
	<?php					
			$cnx = mysql_connect('localhost', 'root','');
			mysql_select_db('bdp',$cnx);				
			$query = mysql_query("SELECT * FROM ART WHERE ref= ???");
			while ($back = mysql_fetch_assoc($query)) {
			$libelle =$back["libelle"];
			$prix = $back["prix"];
			}
	?>
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
 
	xhr.open("POST", "XMLHttpRequest_getListData.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("IdEditor=" + value);
}
 
function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oInput = document.getElementById("libelle");
	var oOption, oInner;
 
	oInput.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oInner  = document.createTextNode(nodes[i].getAttribute("libelle"));
		oOption.appendChild(oInner);
		oInput.appendChild(oOption);
	}
}
//-->
</script>
</head>
<body>
<input type="text" name="code_article" size="6" id="code_article" onKeyPress="if (window.event.keyCode == 13) request(this);" />
<input type="text" name="libelle1" id="libelle" size="73" />
<input type="text" name="prix" id="prix" size="6" />
<input type="text" name="qte" id="qte"  size="6" />
<input type="text" name="ttc" id="ttc"  size="6" />

22/07/2010, 11h24
supersnail

Bonjour,

Déjà, je vois pas pourquoi tu as écrit

Code:

var value = oInput.options[Input.InputIndex].value;

...
oInput est un champ de type text, pas un select :aie:. Donc,il vaudrait mieux écrire:

Code:

var value = oInput.value;

Et ensuite, j'ai du mal à voir ce que tu veux faire dans la fonction readData... Tu nous recrées un formulaire? 8O
22/07/2010, 11h28
bella1

Ajax PHP input

Sans te mentir, j'ai repris un code et ensuite j'ai essayé d'adapter.
Tu peux m'aider à réaliser le code ?

Merci

J'ai un tableau à remplir de ce type

Code:

1
2
3
4
5
6
7
8
<th>Code</th><th>LIBELLE</th><th>Prix</th><th>Qte</th><th>TTC</th></tr>
<tr>
	<td><input type="text" name="code_article" size="6" id="code_article" onKeyPress="if (window.event.keyCode == 13) request(this);" /></td>
	<td><input type="text" name="libelle" id="libelle" size="73" /></td>
	<td><input type="text" name="prix" id="prix" size="6" /></td>
	<td><input type="text" name="qte" id="qte"  size="6" /></td>
             <td><input type="text" name="ttc" id="ttc"  size="6" /></td>
</tr>

Je saisie le code article. Ensuite comment faire pour récupérer le libellé et la suite ds les input text ?

22/07/2010, 11h33
supersnail

Déjà, tu peux montrer la structure de ton XML renvoyé par la page PHP?

Edit: Bah tu peux faire

Code:

document.getElementById("ton_id").value = "quelquechose"

pour modifier la valeur d'un élément ;)
22/07/2010, 11h56
bella1

J'ai pas de page xml
22/07/2010, 12h07
supersnail

Bah ta fonction readData lit bien des données en XML...

Tu peux me montrer ce que renvoie XMLHttpRequest_getListData.php ? (ou alors le code de cette page)

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
<script type="text/javascript">
<!-- 
 
function request(oInput) {
	var value = oInput.value;
	var xhr   = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
 
	xhr.open("POST", "XMLHttpRequest_getListData.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("IdEditor=" + value);
}
 
function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oInput = document.getElementById("libelle");
	var oOption, oInner;
 
	oInput.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oInner  = document.createTextNode(nodes[i].getAttribute("libelle"));
		oInput.appendChild(oOption);
	}
}
//-->
</script>

22/07/2010, 13h52
supersnail

Euh... c'est le code de XMLHttpRequest_getListData.php que je demandais :aie:
22/07/2010, 15h58
bella1

en fait, j'ai copié le code d'un forum.
Sinon, tu peux me dire comment faire ?

Merci,
22/07/2010, 18h20
supersnail

Lire un tuto sur ajax? Y'en a des bien faits ici: http://ajax.developpez.com/cours

Voici le code de XMLHttpRequest_getListData.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
<?php 
 
    //customer ID 
    $sID = $_GET["ref"]; 
    echo "ref :".$sID;
    //variable to hold customer info 
    $sInfo = ""; 
 
    //database information 
    $sDBServer = "localhost"; 
    $sDBName = "bdp"; 
    $sDBUsername = "root"; 
    $sDBPassword = ""; 
    //create the SQL query string 
    $sQuery = "Select * from livres where ref=".$sID; 
 
    //make the database connection 
    $oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword); 
    @mysql_select_db($sDBName) or $sInfo = "Unable to open database"; 
 
    if($sInfo == '') { 
    	$resultat8=mysql_query($sQuery,$oLink) or die("l'execution requete8 : impossible");
		while($ligne=mysql_fetch_assoc($resultat8)){
			$results= $ligne['titre'];	
    	} 
    }
    mysql_close($oLink); 
?>

Le 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
<script type="text/javascript"> 
 
function getHTTPObject() { 
    var xmlhttp; 
    if(window.XMLHttpRequest){ 
    xmlhttp = new XMLHttpRequest(); 
	}else if (window.ActiveXObject){ 
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    	if (!xmlhttp){ 
        	xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
        }   
	} 
  return xmlhttp;  
} 
var http = getHTTPObject(); // We create the HTTP Object 
 
 
function handleHttpResponse() {    
	if (http.readyState == 4) { 
    	if(http.status==200) { 
    		var results=http.responseText; 
        	document.getElementById('libelle1').innerHTML = results; 
    	} 
    } 
} 
 
var url = "GetCustomerData.php?ref="; // The server-side script
function requestCustomerInfo() {    
	alert("OK"+document.getElementById("code_article").value);
	var sId = document.getElementById("code_article").value; 
    http.onreadystatechange = handleHttpResponse; 
    http.open("GET", url+escape(sId), true); 
    http.send(null); 
} 
 
 
</script>

Le input

Code:

1
2
3
4
<td><input type="text" name="code_article" size="6" id="code_article" onKeyPress="if (window.event.keyCode == 13){ requestCustomerInfo(); }" /></td>
	<td><input type="text" name="libelle1" id="libelle1" size="73" value="" /></td>
	<td><input type="text" name="num_four1" id="num_four1" size="6" value="" /></td>
	<td><input type="text" name="nom_four1" id="nom_four1"  size="45" value"" /></td>

Comment je fais pour récupérer le results et ensuite l'insérer ds input dont l'id est libelle1 ?

Merci,

23/07/2010, 11h34
supersnail

Bonjour,

Déjà ton javascript est bon, mais le souci, c'est que ta page php ne renvoie... rien du tout :roll:.

Donc forcément, tu ajoutes du vide à ta textbox, ce qui donne l'impression que rien ne se passe ;)

Donc un petit

Code:

echo $ligne['titre'];

dans ton while devrait suffire ;) (à ce propos, je vois pas ce que vient faire ton while ici, tu ne récupères qu'un seul enregistrement :koi:).

Copier-coller, quand tu nous tiens :calim2:
23/07/2010, 11h49
bella1

C'est vrai et je l'avais dejà vu cette erreur.
Le while c'est pour récupérer le prix et la quantité que je m'en sert pas encore.
sinon, je code ne fonctionne pas. J'ai un message de IE8 "unknow runtime error line25 char0"
La ligne

Code:

document.getElementById("libelle1").innerHTML = results;

ça vs parle ?

Merci

J'ai remplacé le code html, pour le libellé, j'ai mis div au lieu de input

Code:

1
2
3
4
5
6
<tr><?php //if (window.event.keyCode == 13){ }?>
	<td><input type="text" name="code_article" size="8" id="code_article" onKeyPress="if (window.event.keyCode == 13){ requestCustomerInfo(); }" /></td>
	<td><div type="text" name="libelle" id="libelle" size="72"></div></td>
	<td><input type="text" name="num_four1" id="num_four1" size="6" value="" /></td>
	<td><input type="text" name="nom_four1" id="nom_four1"  size="45" value"" /></td>
</tr>

J'ai un resultat undefined,