计算表单输入 onChange答案

【问题标题】：Calculate form inputs onChange计算表单输入 onChange
【发布时间】：2014-03-13 15:46:24
【问题描述】：

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

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

    <!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?

【问题讨论】：

var t; $("input[name^=sku]").each(function(){t+=parseFloat($(this).val())}); $("#sum").html("Total: "+t) 是使用 jQuery 的一种方式 - 您可以在表单提交或输入 keyup 事件中使用它
@SmokeyPHP 这实际上是一个有效的答案，你不应该使用 cmets 来回答这个问题。
@Skwal 是的，我只是懒得使用更冗长的选择器/变量名，也不想发布一个懒惰的答案。不过现在发帖没有意义，Tushar 已经解决了

标签： javascript jquery html forms

【解决方案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()

【讨论】：

我认为他不希望提交时这样
这将产生一个连接字符串的值
感谢代码，它导致了这个，[code]Uncaught Error: Syntax error, unrecognized expression: #12345 input[name^="sku][/code]，我必须补充一下表单 ID 也可以是数字，例如
.
@D_Guy13 哦，我错过了关闭" 看到更新的答案。
嗯，仍然没有任何反应。控制台也不输出任何东西。

【解决方案2】：

在提交表单之前，您可以使用表单的onsubmit 属性来做任何您想做的事情。您也可以更改action 属性。你也可以preventDefault这里说-

jQuery on submit preventDefault() does not works

【讨论】：

【解决方案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 作为输入。这很奢侈，不需要，你可以在函数中添加那个选择器，但是这样可以更灵活地使用它。您可以在此处使用[name^=*] 选择器，但它比类慢，您可能会在大型文档中注意到这一点。

另外，在我的代码中，我检查它是否没有任何价值来防止错误。您可以扩展它来测试输入是否实际上是一个数字。

【讨论】：