Ajax
Résolu
aloisiø
Messages postés
68
Statut
Membre
-
Zep3k!GnO Messages postés 2049 Statut Membre -
Zep3k!GnO Messages postés 2049 Statut Membre -
Bonjour,
j'essaie en ce moment de faire une multiplication en ajax pour que le résultat s'affiche directement, j'ai trouvé un code sur internet mais il faut appuyer sur un bouton. Quelqu'un pourrait 'aider à modifier ce code pour qu'il n'y ai plus besoin d'appuyer sur le bouton pour que le résultat s'affiche directement ? Merci d'avance
Le code :
<html>
<head>
<title>Ajax Multiply Example</title>
<script language="Javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById('result').value = str;
}
function callMultiply(){
var a = parseInt(document.f1.a.value);
var b = parseInt(document.f1.b.value);
var url = "multiply.php?a=" + a + "&b=" + b + "";
postRequest(url);
}
</script>
</head>
<body>
<h1 align="center"><font color="#000080">Ajax Example</font></h1>
<form name="f1">
<input name="a" id="a" value="">
<input name="b" id="b" value="">
<input name="result" type="text" id="result">
<input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
</form>
</body>
</html>
La page multiply.php :
<?php
$a=$_GET["a"];
$b=$_GET["b"];
$mul=$a*$b;
echo $mul;
?>
j'essaie en ce moment de faire une multiplication en ajax pour que le résultat s'affiche directement, j'ai trouvé un code sur internet mais il faut appuyer sur un bouton. Quelqu'un pourrait 'aider à modifier ce code pour qu'il n'y ai plus besoin d'appuyer sur le bouton pour que le résultat s'affiche directement ? Merci d'avance
Le code :
<html>
<head>
<title>Ajax Multiply Example</title>
<script language="Javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById('result').value = str;
}
function callMultiply(){
var a = parseInt(document.f1.a.value);
var b = parseInt(document.f1.b.value);
var url = "multiply.php?a=" + a + "&b=" + b + "";
postRequest(url);
}
</script>
</head>
<body>
<h1 align="center"><font color="#000080">Ajax Example</font></h1>
<form name="f1">
<input name="a" id="a" value="">
<input name="b" id="b" value="">
<input name="result" type="text" id="result">
<input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
</form>
</body>
</html>
La page multiply.php :
<?php
$a=$_GET["a"];
$b=$_GET["b"];
$mul=$a*$b;
echo $mul;
?>
3 réponses
Comme tu le dis, c'est déclenché par un click : onClick="callMultiply()"
Regardes du coté des événements qui pourraient être liés à la modification d'un input et tu as ta solution ;)
https://www.w3schools.com/jsref/dom_obj_event.asp
Regardes du coté des événements qui pourraient être liés à la modification d'un input et tu as ta solution ;)
https://www.w3schools.com/jsref/dom_obj_event.asp
difficile de faire cela sur la modif d'un des input, car comment savoir quand tu as fini de le remplir, en effet si tu veux taper 1256 dès que tu vas taper 1 ça va déclencher l'appel à la fonction
et surtout bien faire la verif que l'autre input n'est pas vide
et surtout bien faire la verif que l'autre input n'est pas vide
C'est bien ça le truc, en gros, dans ton javascript, tu testes si tu a bien une valeur pour les 2 champs, si c'est le cas, tu l'envoi via ajax a ton serveur qui se charge du calcul et retourne le résultat.
Le fait que le calcul se fasse sur la modification n'a rien de problématique, tu affichera a la volé le résultat de la saisie.
Sinon tu peux aussi le faire lorsque l'élément perd le focus, mais il faudra alors que la personne perde le focus sur le 2eme input pour que ça soit valable et donc non ergonomique.
A toi de voir quelle événement déclencheur te convient le mieux.
Le fait que le calcul se fasse sur la modification n'a rien de problématique, tu affichera a la volé le résultat de la saisie.
Sinon tu peux aussi le faire lorsque l'élément perd le focus, mais il faudra alors que la personne perde le focus sur le 2eme input pour que ça soit valable et donc non ergonomique.
A toi de voir quelle événement déclencheur te convient le mieux.
onBlur() : https://www.w3schools.com/jsref/dom_obj_event.asp
La doc que je met en lien (post 25 oct. 2011 à 12:22), ça sert à quelque chose ou tu la lis vraiment pas ?
La doc que je met en lien (post 25 oct. 2011 à 12:22), ça sert à quelque chose ou tu la lis vraiment pas ?