-1

我已经使用 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>
4

4 回答 4

2

我创建了一个插件来创建名为 calx 的计算表格，你可以在这里下载它， 只需在目标元素中定义数据公式，并初始化 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');
    });
});
于 2013-06-30T02:23:02.283 回答
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等不是Numbers 并且+还连接：

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

<input>值始终String是 s，因此您需要解析它们以添加 Numbers 而不是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 建议的那样）有一个好处return false：

它可以在事件处理程序中更快地使用，即使出现错误，仍可以阻止默认操作。

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

    // retrieve the values from the amount and percentage fields
    // ...
}
于 2013-06-30T02:30:54.587 回答
1

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

$('#calculator').on('submit', function(ev) {
    ev.preventDefault();
    calculate();
});
于 2013-06-30T01:44:20.920 回答
0

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

更新

字符串到数字就像这样

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

这是解决方案

于 2013-06-30T01:47:48.557 回答