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

我希望创建一个非常简单的计算器，但我需要它在每次击键更新。我似乎无法找到该特定类别中的任何内容。任何人都可以指向正确的方向吗？的jQuery/JavaScript的计算器，自动更新实时（猜测AJAX）

我正在寻找类似于A * 1.325 + B * 3.76的地方，其中B是下拉菜单，A是人们将填写的文本字段。每次更改下拉列表或在文本框中注册按键时。

我也尝试着做一些正则表达式来仅允许数字或小数点！

谢谢你们非常多！

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

来源

2012-07-27 JEFF B

你应该问一个更具体的问题。到目前为止你做了什么？你卡在哪里？ – 2012-07-27 22:46:40

不，不是AJAX。 AJAX是您需要从服务器异步获取数据的时候（请考虑Google即时）。 – Linuxios 2012-07-27 22:46:48

用户给出或输入的公式是什么？ – Bergi 2012-07-27 22:49:11

第1步：

做jQuery教程。有趣好玩的乐趣：d：d：d http://docs.jquery.com/Tutorials

第2步：

现在你明白jQuery的，请注意，jQuery的支持一串事件处理程序。例如，您可以点击事件分配到的东西，在一个下拉菜单，类似于一个项目：

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

第3步：

选择了正确的事件处理程序使用。 click（对于下拉菜单）和keyup（对于文本字段）声音充满希望。

第4步：

保持修补。你根本不需要PHP。

来源

2012-07-27 22:59:24 dangerChihuahua007

你不需要使用，不应该使用，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()); 
});

来源

2012-07-27 22:52:56 jeff

虽然我等着听回来我做了一点研究，发现一些代码，我觉得会为我在找工作。我正在推翻整个事情！

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

来源

2012-07-27 22:55:16

然后，我将onBlur更改为onKeyUp，并将parseInt更改为parseFloat，我非常高兴！多谢你们！很抱歉，在这么简单的时候问一个愚蠢的问题！ – 2012-07-27 22:57:57

您试过onchange="calculator()"？

来源

2012-07-27 22:56:49 Robi

第一个问题。如果你只需要简单的计算器，为什么你需要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构建简单的计算器，无需提交表单，因为它可以实时工作。

希望它有帮助:)

来源

2012-07-27 23:04:45 vikingmaster

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

回答

相关问题