Javascript更新字段總數

Question

我已經使用Javascript創建了代碼，但當我點擊計算按鈕時出現錯誤並且出現錯誤。

使用式IM是這樣的：

A + B + C + D x E% + F =

我收到的錯誤是：

{ 「錯誤」： 「請使用POST請求」}

我使用的代碼是：

// define a function to perform our calculation. 
function calculate() { 
// retrieve the values from the amount and percentage fields 
// and store them in variables. 
var A = $('#A').val(); 
var B = $('#B').val(); 
var C = $('#C').val(); 
var D = $('#D').val(); 
var E = $('#E').val(); 
var F = $('#F').val(); 

// calculation 
var total = A + B + C + D * (E/100) + F; 

$('#total').val(total.toFixed(2)); 

return false; 
} 

$('#calculator').submit(calculate); 



<form id="calculator"> 
<p>Base: 
    <input id="A" value="0.00" /> 
</p> 
<p>Rush: 
    <input id="B" value="0.00" /> 
</p> 
<p>Added: 
    <input id="C" value="0.00" /> 
</p> 
<p>Extra: 
    <input id="D" value="0.00" /> 
</p> 
<p>Ship: 
    <input type ="hidden" id="E" value="5" /> 
</p> 
<p> 
    <input id="F" value="0.00" /> 
</p> 
<hr /> 
<p>Total: 
    <input id="total" disabled="disabled" /> 
</p> 
<p> 
    <input type="submit" /> 
</p> 
</form> 

Answer 1

我已創建一個插件來創建計算形式稱爲生石灰，你可以下載它here 只是在目標元素定義數據公式，並初始化生石灰

<form id="calculator"> 
    <p>Base: <input type="text" id="A" value="0.00" /></p> 
    <p>Rush: <input type="text" id="B" value="0.00" /></p> 
    <p>Added: <input type="text" id="C" value="0.00" /></p> 
    <p>Extra: <input type="text" id="D" value="0.00" /></p> 
    <p>Ship: <input type ="hidden" id="E" value="5" /></p> 
    <p><input type="text" id="F" value="0.00" /></p> 
    <hr /> 
    <p>Total: <input type="text" id="total" disabled="disabled" data-formula="$A + $B + $C + $D * ($E/100) + $F" /></p> 
    <p><input type="submit" id="calculate" /></p> 
</form> 

的javascript部分

$(document).ready(function(){ 
    $('#calculator').calx({autocalculate:false}); 
    $('#calculate').click(function(e){ 
     e.preventDefault(); 
     $('#calculator').calx('update'); 
    }); 
}); 

Answer 2

假設你希望它只是計算總沒有實際提交，您需要從程序停止提交事件：

$('#calculator').on('submit', function(ev) { 
    ev.preventDefault(); 
    calculate(); 
}); 

Answer 3

在你的代碼total.toFixed(2)給這個錯誤，並且默認的JavaScript將採取價值字符串，你必須處理到

更新

串號只是做這樣

var total = A*1 + B*1 + C*1 + D * (E/100) + F*1;

HERE IS THE SOLUTION

Answer 4

你是ge從calculate()中間擬合未處理TypeError：

$('#total').val(total.toFixed(2)); 
// TypeError: Object 0.000.000.0000.00 has no method 'toFixed' 

有了它被拋出，return false;不評估和<form>仍然提交正常。而且，{"error": "Please use POST request"}是JSFiddle拒絕處理該請求的方式，因爲它與HTTP GET一起發送。

錯誤是因爲total,A, B等。不Number S和+ also concatenates：

var total = A + B + C + D * (E/100) + F; 
// total = "0.00" + "0.00" + ... + "0.00"; 

<input>值總是String S，所以你需要parse them以添加Number真是讓人不是CONCATString S：

var A = parseFloat($('#A').val()); 
var B = parseFloat($('#B').val()); 
var C = parseFloat($('#C').val()); 
var D = parseFloat($('#D').val()); 
var E = parseFloat($('#E').val()); 
var F = parseFloat($('#F').val()); 

http://jsfiddle.net/wKr3u/

---

而且，雖然差異是可以忽略不計在大多數情況下，e.preventDefault()（如Jeff Mercado suggested）有一個好處超過return false：

它可用於在事件處理程序更快，允許仍然可以防止儘管一個默認的動作錯誤。

function calculate(ev) { 
    ev.preventDefault(); 

    // retrieve the values from the amount and percentage fields 
    // ... 
}