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

【问题标题】：Dynamically total input field values, after they have been entered, but before they are submitted动态总计输入字段值，在输入之后但在提交之前
【发布时间】：2014-03-12 00:07:11
【问题描述】：

我通常不使用 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>

【问题讨论】：

你可以使用 jquery 吗？将 jquery.change 绑定到两者并有两个布尔值，当一个被更改时设置为 true 然后如果两者都被更改，则向服务器上的某个路由发送请求，该路由将返回答案，然后你可以用它做你需要的事情
我认为更简单的东西应该是我所需要的。我在上面进行了尝试，但必须使用按钮和 span 元素，因为表单输入元素“total”拒绝更新。
jquery dude ，它会为你省去很多麻烦，关于它失败的字段是空的，只要检查 value1/value2 是否有值，如果你的函数中没有等于 0 的值
好的，告诉我怎么做：) 我可以链接 Google 的 jquery 实例吗？
只是好奇为什么不在保存到数据库之前在服务器端进行计算？

标签： javascript jquery ajax forms

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

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

jsFiddle demo

【讨论】：

我喜欢它。谢谢你：）
奇怪的是它在我的网站上不起作用。我在标题中将您的 jQuery 包含在单独的
@square_eyes 听起来不错，是的。您还对 HTML 进行了更改以将 class="value" 添加到 <input> 元素？
没关系，我通过将 jQuery 放在我的

【解决方案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 上获取结果。

【讨论】：

那么如何触发jquery呢？它需要是动态的。
nvm，我想我误解了你的问题。

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

这个可行，请试试这个

【讨论】：