javascript - 输入字段值的动态总计(在输入之后、提交之前)

Question

我通常不使用js，所以我希望能快速获胜。尽管有很多类似的问题，但我找不到 SO 的答案。

我有一个表格...

<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />

<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

在输入内容后、提交表单之前，如何使用 ajax(或其他方式)将 value1 乘以 value2？

要求是在填写表单时简单地显示 value1 * value 2 的乘积。但如果我想将它添加到我的数据库中，如上所述，最好将其嵌入到表单字段中。

编辑:以下是我的尝试。但我只能更新一个 span 元素，而不是自动更新。如果字段为空，也会失败。

<script>
function calculateSum()
{
    value1 = parseInt(document.getElementById("value1").value);
    value2 = parseInt(document.getElementById("value2").value);

    sum = value1 * value2;

    document.getElementById("totalpledge").innerHTML = sum;
}
</script>

似乎可以使用按钮...

<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />

<span id="totalpledge">--</span>
<span><button onclick="calculateSum()">Submit!</button></span>

Answer 1

我会做这样的事情:

HTML

<input type="text" size="5" id="value1" name="value1" class="value"/>
<input type="text" size="5" id="value2" name="value2" class="value"/>

<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

刚刚将 class="value" 添加到元素中，以便您可以轻松识别需要对总数做出贡献的所有元素。

jQuery:

jQuery(document).ready(function($) {
    var $total = $('#total'),
        $value = $('.value');
    $value.on('input', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseInt(this.value, 10)))
                total = total * parseInt(this.value, 10);
        });
        $total.val(total);
    });
});

将事件处理程序绑定(bind)到 input 的所有 .value 元素(所有带有 class="value" 的元素) > 事件，只要输入的值发生变化就会触发该事件。然后它简单地迭代每个所需的输入并将它们的值相乘。最后，它将总值放入 #total 元素中。

jsFiddle demo