Ajax

Résolu
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;
?>

3 réponses

  1. 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
    1. 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.
      1. Quand tu dis perdre le focus c'est que l'utilisateur change de case par exemple ?