动态总输入字段值,在输入之后,但在提交之前

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);
    });
});

这会将事件处理程序绑定到事件的所有.value元素(所有元素class="value")input,只要输入的值发生更改,就会触发该元素.然后,它只是遍历每个所需的输入并将它们的值相乘.最后,它将总价值放入#total元素中.

jsFiddle演示