Question

我有一个动态表单，根据用户添加到购物车的内容生成。

例如，表单看起来像这样，

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Form</title>
</head>
<body>
    <form action="" name="cart" id="cart">
    <input type="text" name="sku1">
    <input type="text" name="sku2">
    <input type="text" name="sku3">
    <input type="text" name="sku4">
    <input type="text" name="sku5">

    <div class="sum" id="sum"> Total: {SUM SHOULD SHOW UP HERE)</div>
    <button name="submit">Send</button>
    </form>
</body>
</html>

但这些输入字段是自动生成的，可能多于或少于5个字段。

如何在没有页面刷新的情况下计算那些输入SUM值并输出到SUM div？

的JavaScript / jQuery的？

Answer 1

$('button[name="submit"]').click(function () {
    var sum = 0;
    $('#cart input[name^="sku"]').each(function () {
        var val = isNaN(+this.value) ? 0 : +this.value; 
        sum += val;
    });
    $('#sum').text(sum);
});

<小时/> 或

var inp = $('#cart input[name^="sku"]');
inp.change(function () {
    var sum = 0;
    inp.each(function () {
        var val = isNaN(+this.value) ? 0 : +this.value; 
        sum += val;
    });
    $('#sum').text(sum);
});

Attribute Starts With Selector [name^="value"]

.change()

isNaN()

Answer 2

您可以使用表单的onsubmit属性在提交表单之前执行任何操作。您也可以更改action属性。你也可以在这里说preventDefault -

jQuery on submit preventDefault() does not works

Answer 3

您可以为元素提供一个类amountForTotal，并使用一个函数计算总数，您可以将其添加到按钮或输入的onchange事件。

function calcTotal( $elements ){
    var total = 0;
    $elements.each(function(){
        // if the input has no value, add 0, if it has, add the value
        total+= this.value.length===0 ? 0 : parseInt(this.value); 
    })
    return total; // return the total
}

$elements = $('.amountForTotal'); // select them
// Bind an event to recalc the total
$elements.on('keyup', function(){
    alert( calcTotal($elements) );
});

在此代码中，我提供了selector作为输入。这是luxery，不需要，你可以在函数中添加该选择器，但这样它可以更灵活地使用。你可以在这里使用[name^=*]选择器，但它比一个类慢，你可能会在大型文档中注意到这一点。

另外，在我的代码中，我检查它是否没有值来防止错误。您可以展开它以测试输入是否为实数。

计算表格输入onChange

3 个答案: