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 demo

Answer 2

我不确定这是不是你想要的。

HTML部分：

<form action="some.php" method="POST" id="myForm">
    <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" />
    <input type="submit" value="submit" />
</form>

jQuery进行计算：

$("#myForm").submit( function(e) {
    $("#total").val( parseFloat($("#value1").val()) * parseFloat($("#value2").val()) );
});

然后您可以在$_POST['total']上按some.php获取结果。

Answer 3

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
 value1 = parseInt(document.getElementById("value1").value);
 value2 = parseInt(document.getElementById("value2").value);
    if(!value1==""&&!value2=="")
    {
     sum = value1 * value2;
     document.getElementById("total").value = sum;
    }
}
</script>
</head>
<body>
<form action="some.php" method="POST" id="myForm">
    <input type="text" size="5" id="value1" name="value1"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="value2" name="value2"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="total" class="bckground" name="total" />
    <input type="submit" value="submit"/>
</form>

</body>
</html>

这可以尝试这个

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

3 个答案: