Ajax

Résolu

aloisiø Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
Zep3k!GnO Messages postés 2025 Date d'inscription Statut Membre Dernière intervention - 26 oct. 2011 à 11:09

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

A voir également:

Ajax
Erreur ajax ✓ - Forum Javascript
Ajax: comment faire? ✓ - Forum PHP
Easyphp ajax ✓ - Forum PHP
Ajax ne fonctionne pas... ? - Forum Programmation
Le technologie AJAX ✓ - Forum Réseaux sociaux

3 réponses

Réponse 1 / 3

Zep3k!GnO Messages postés 2025 Date d'inscription Statut Membre Dernière intervention 200

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

Réponse 2 / 3

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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

Réponse 3 / 3

Zep3k!GnO Messages postés 2025 Date d'inscription Statut Membre Dernière intervention 200

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.

aloisiø Messages postés 54 Date d'inscription Statut Membre Dernière intervention 1

Quand tu dis perdre le focus c'est que l'utilisateur change de case par exemple ?

Zep3k!GnO Messages postés 2025 Date d'inscription Statut Membre Dernière intervention 200

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 ?

Discussions similaires

probléme avec ajax svp

Problème requête Ajax avec jquery

Afficher un message d'erreur avec l'Ajax

Mot de passe oublié PHP/Ajax

problème ajax

Votre réponse

Discussions similaires