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

回答

相關問題