2 votes

JEFF B avatar

Calculatrice jQuery/Javascript qui se met à jour automatiquement en temps réel (en devinant AJAX)

Demandé el 28 de Juillet, 2012
Quand la question a-t-elle été
6971 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je cherche à créer une calculatrice assez simple, mais j'ai besoin qu'elle se mette à jour à chaque pression de touche. Je ne trouve rien dans cette catégorie spécifique. Quelqu'un peut-il m'indiquer la bonne direction ?

Je cherche quelque chose comme A*1.325 + B*3.76 où B est un menu déroulant et A est le champ de texte que les gens vont remplir. Chaque fois que le menu déroulant est modifié ou qu'une frappe est enregistrée dans la zone de texte.

Je vais aussi essayer de faire un RegEx pour n'autoriser que les chiffres ou les points décimaux !

Merci beaucoup les gars ! !!

PS. J'utiliserai PHP/HTML pour créer le formulaire.

Demandé el 28 de Juillet, 2012 par JEFF B

Réponses

Trop de publicités?

3voto

David Faux avatar
David Faux Points 4912

Étape 1 :

Faites les tutoriels jQuery. fun fun fun fun :D :D :D http://docs.jquery.com/Tutorials

Étape 2 :

Maintenant que vous comprenez ce qu'est jQuery, remarquez qu'il prend en charge un grand nombre de gestionnaires d'événements. Par exemple, vous pouvez attribuer un événement de clic à quelque chose qui ressemble à un élément d'un menu déroulant :

$("itemInMyDropDownMenu").click(function(e) {
    doSomeCalculation(parseFloat(this.val()));
}

Étape 3 :

Choisissez les bons gestionnaires d'événements à utiliser. click (pour le menu déroulant) et keyup (pour le champ de texte) semblent prometteurs.

Étape 4 :

Continuez à bricoler. Vous n'avez pas besoin de PHP du tout.

Répondu el 28 de Juillet, 2012 par David Faux (4912 Points )

3voto

Jari avatar
Jari Points 5820

La première question. Si vous avez besoin d'une simple calculatrice, pourquoi auriez-vous besoin d'AJAX ? AJAX peut envoyer des requêtes aux pages web et aux scripts et obtenir les réponses en XML, JSON, html ou simple texte.

Si vous avez toujours besoin d'AJAX, lisez http://www.w3schools.com/ajax/default.asp

Mises à jour en temps réel : Définissez l'identifiant des éléments avec lesquels vous allez travailler. Créez le gestionnaire approprié, qui est appelé chaque fois que le champ est modifié.

<input type="text" id="field" value="" onChange="javascript: setA(this)"/>

function setA(obj){
  var a = 0 ;
  if (obj.value)
    a = obj.value ;
   //call any function to calculate anything and send a.
}

Si vous voulez afficher quelque chose, c'est ici que id devient pratique.

<div id="result"></div>
document.getElementById("result").innerHTML = 345 ; //just set to what you need

Vous pouvez utiliser pleinement le javascript pour construire une simple calculatrice sans soumettre le formulaire, car il peut travailler en temps réel.

J'espère que cela vous aidera :)

Répondu el 28 de Juillet, 2012 par Jari (5820 Points )

2voto

JEFF B avatar
JEFF B Points 66

Dans l'attente d'une réponse, j'ai fait un peu plus de recherches et j'ai trouvé un code qui, je pense, correspondra à ce que je recherche. J'ai trop réfléchi à tout ça !

<html>
<head>
</head>
<body>
<script>
function doMath() {
    var totalparts = parseInt(document.getElementById('parts_input').value);
    var labor = parseInt(document.getElementById('labor_input').value);
    var misc = parseInt(document.getElementById('misc_input').value);
    var subtotal = totalparts + labor + misc;
    var tax = subtotal * .13;
    var total = subtotal + tax;

    document.getElementById('subtotal_input').value = subtotal;
    document.getElementById('tax_input').value = tax;
    document.getElementById('total_input').value = total;
}
</script>

<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>
<div>Labor: <input type="text" id="labor_input" onBlur="doMath();" /></div>
<div>Misc: <input type="text" id="misc_input" onBlur="doMath();" /></div>
<div>Sub Total: <input type="text" id="subtotal_input" readonly="true" /></div>
<div>Tax: <input type="text" id="tax_input" readonly="true" /></div>
<div>Total: <input type="text" id="total_input" readonly="true" /></div>
</body>
</html>
Répondu el 28 de Juillet, 2012 par JEFF B (66 Points )

0voto

jeff avatar
jeff Points 7850

Vous n'avez pas besoin d'utiliser, et ne devriez pas utiliser, AJAX pour cela. Au lieu de cela, vous devriez faire quelque chose comme ceci :

$("#textfieldID, #dropDownMenuID").change(function() {
    var aVal = $("#textFieldID").val() == "" ? 0 : parseFloat($("#textFieldID").val());
    var bVal = $("#dropDownMenuID").val() == "" ? 0 : parseFloat($("#dropDownMenuID").val());
    $("#answerID").text((aVal*1.325 + bVal*3.76).toString());
});
Répondu el 28 de Juillet, 2012 par jeff (7850 Points )

0voto

Robi avatar
Robi Points 248

Avez-vous essayé onchange="calculator()" ?

Répondu el 28 de Juillet, 2012 par Robi (248 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X