Question

我已经使用Javascript创建了代码，但是当我点击计算按钮时，我收到了错误。

使用的公式是：

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

我收到的错误是：

{“error”：“请使用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

我创建了一个插件来创建名为calx的计算表单，你可以下载它here 只需在target元素中定义数据公式，并初始化calx

<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

您从TypeError中间获得了未处理的calculate()：

$('#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和+ also concatenates：

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

<input>值始终为String s，因此您需要parse them才能添加 Number而不是 concat String 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
    // ...
}

Answer 3

假设您希望它只计算总数而不实际提交，则需要停止提交事件：

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

Answer 4

在您的代码total.toFixed(2)上发出此错误，默认情况下，javascript会将值作为字符串，因此您必须将其处理为

<强>更新

字符串到数字只是这样做

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

HERE IS THE SOLUTION

Javascript更新字段的总和

4 个答案: