Question

我正在寻找一个非常简单的计算器，但我需要它来更新每次击键。我似乎无法找到该特定类别的任何内容。有人能指出我正确的方向吗？

我正在寻找像A * 1.325 + B * 3.76这样的东西，其中B是下拉菜单，A是人们将填写的文本字段。每次更改下拉列表或在文本框中注册击键时。

我也会尝试做一些RegEx只允许数字或小数点！

非常感谢你们！

PS。将使用PHP / HTML来创建表单。

Answer 1

第1步：

执行jQuery教程。有趣的乐趣：D：D：D http://docs.jquery.com/Tutorials

第2步：

现在您已了解jQuery，请注意jQuery支持一堆事件处理程序。例如，您可以将click事件分配给类似于下拉菜单中项目的内容：

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

第3步：

选择要使用的正确事件处理程序。 click（对于下拉菜单）和keyup（对于文本字段）听起来很有希望。

第4步：

继续修修补补。你完全不需要PHP。

Answer 2

第一个问题。如果你只需要简单的计算器，你为什么需要AJAX？ AJAX可以向网页和脚本发送请求，并获取XML，JSON，HTML或简单的文本响应。

如果您仍需要AJAX，请阅读http://www.w3schools.com/ajax/default.asp

实时更新 设置要使用的元素的ID。创建适当的处理程序，在字段更改时调用该处理程序。

<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.
}

如果你想展示一些东西，这里的id会很方便。

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

您可以充分利用javascript构建简单的计算器，而无需提交表单，因为它可以实时工作。

希望有所帮助：）

Answer 3

在我等待回复的过程中，我做了一些研究，发现了一些我认为适用于我所寻找的代码。我是在思考整个事情!!

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

Answer 4

您不需要使用，也不应该使用AJAX。相反，你应该做这样的事情：

$("#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());
});

Answer 5

您是否尝试过onchange="calculator()"？

jQuery / Javascript计算器自动更新实时（猜测AJAX）

5 个答案: