[AJAX] Ajax PHP input

**bella1** · 22/07/2010, 11h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**supersnail** · 22/07/2010, 11h24

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

...
oInput est un champ de type text, pas un select

. Donc,il vaudrait mieux écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**bella1** · 22/07/2010, 11h28

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

Merci

**bella1** · 22/07/2010, 11h33

J'ai un tableau à remplir de ce type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**supersnail** · 22/07/2010, 11h33

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

Edit: Bah tu peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pour modifier la valeur d'un élément

**bella1** · 22/07/2010, 11h56

J'ai pas de page xml

**supersnail** · 22/07/2010, 12h07

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)

**bella1** · 22/07/2010, 12h14

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**supersnail** · 22/07/2010, 13h52

Euh... c'est le code de XMLHttpRequest_getListData.php que je demandais

**bella1** · 22/07/2010, 15h58

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

Merci,

**supersnail** · 22/07/2010, 18h20

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

**bella1** · 23/07/2010, 10h32

Voici le code de XMLHttpRequest_getListData.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bella1** · 23/07/2010, 10h39

Le script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**supersnail** · 23/07/2010, 11h34

Bonjour,

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

.

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

Donc un petit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

).

Copier-coller, quand tu nous tiens

**bella1** · 23/07/2010, 11h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça vs parle ?

Merci

**bella1** · 23/07/2010, 12h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

[AJAX] Ajax PHP input

AJAX

Discussions similaires

Partager

Partager