Question

我想知道如何计算以下字段的输入值

<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">

并更新范围文本和隐藏字段值

TOTAL <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">

提前致谢

Answer 1

尝试使用查询$db = new SQLite3("db/multi_db.db"); // copy/clone single.sqlite to multi_db.db $db->exec("ATTACH DATABASE 'db/single.sqlite' AS single"); $db->exec('CREATE TABLE "vars" AS SELECT * FROM single."vars"'); // update multi_db with new rows from single.sqlite $db->exec('UPDATE TABLE "vars" SELECT * FROM single."vars"');功能。使用parseFloat将字符串转换为数字。对于each()事件进行实时更新

＆＃13;

keyup

＆＃13;

$('.auto-sum').keyup(function(){
var a=0;
$('.auto-sum').each(function(){
a+=parseFloat($(this).val())
})
$('#amountTotal').text(a|0)
$('#total').val(a|0)
console.log($('#total')[0].outerHTML)//its show the hidden field value
})

＆＃13;

Answer 2

我尝试使用blur方法来输入mouseleave并检查所有输入值并添加！然后更新到想要的元素!!

$("input").on("blur",function(){
    var total = 0;
    $("[type='text']").each(function(){
        if($(this).val() != "") {
            total += parseInt($(this).val());
        }
    });
    $("#amountTotal").text(total);
    $("#total").val(total);
});

Answer 3

您可以使用<input type="number" />输入强制输入的值为数字。

从那里你可以使用查询选择器input.auto-sum调用jQuery来获取类auto-sum的所有输入元素

使用each功能，您可以将数字添加到累加器以获得总数。

然后，您可以将jQuery与查询选择器一起使用，以使用Total值设置页面上的任何其他元素。

＆＃13;

function getTotal() {
   var total=0;
   $('input.auto-sum').each(function(i,e)
   {
      total += Number($(e).val());
      
   });
   $('#amountTotal').text(total);
   $('#total').val(total);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Score 1: <input type="number" name="score1" class="auto-sum"><br />
Score 2: <input type="number" name="score2" class="auto-sum"><br />
Score 3: <input type="number" name="score3" class="auto-sum"><br />
TOTAL:  <span id="amountTotal">0 </span><br />
<input id="total" type="hidden" name="total" value="">
<input type="button" id="btnTotal" onclick="getTotal()" value="Get Total" />

＆＃13;

Answer 4

这应该做你想要达到的目标：

＆＃13;

function displaySum () {
  var sum = 0;
  // iterate over the input fields
  $('.auto-sum').each(function () {
    var value = $(this).val() || 0;
    var number = parseInt(value, 10); // parse the input value to an integer
    if (isNaN(number)) {
      number = 0;
    }
    sum += number; // add the value to the sum
  });
  // set the value of the two elements
  $('#amountTotal').text(sum);
  $('#total').val(sum);
}

// whenever the value of one of the input fields changes, call the displaySum function
$('.auto-sum').on('change, keyup', displaySum);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">

TOTAL  <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">

＆＃13;

Answer 5

请试试这个。

$('.auto-sum').on('change',function(){
var totalvalue=0;
$('.auto-sum').each(function(a,b){
totalvalue=totalvalue+parseInt(($(b).val()=='' || isNaN($(b).val()))?0:$(b).val());
});

$('#amountTotal').text(totalvalue);
$('#total').val(totalvalue);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">

TOTAL  <span id="amountTotal">0</span>
<input id="total" type="hidden" name="total" value="">

Answer 6

<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
<input type="button" id="calculator" value="Caculate">


$("#calculator").on("click",function (){
var result=0;
var sum_fields=$(".auto-sum");
for(var i=0;i<sum_fields.length;i++){
if(!isNaN(sum_fields[i]) && sum_fields[i]>0){
result += sum_fields[i];
}
}
$("#amountTotal").text(result);
$("#total").val(result);
});

为字段创建数组并循环遍历它们检查它是否不是NaN并且大于0将它们添加到结果然后在循环将结果附加到隐藏字段并作为跨度文本

Answer 7

我发布这个作为答案，因为评论区域是小的

起初我认为写一个好主意

<input type  = "number">

当您不想显示小箭头时，请查看此解决方案：

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

keyup 事件是“实时”显示总和的最佳方式

最后看一下 vue.js

这是此方案的最佳解决方案。

Answer 8

如果您对纯JavaScript解决方案感兴趣：

所有输入都有一个oninput事件属性，当输入发生变化时会触发该属性。

您可以将事件处理程序附加到事件，如下所示：

<input oninput="updateTotal" />

其中updateTotal是在脚本中声明的函数：

function updateTotal { /* code that updates the total */ }

如果您在脚本中选择输入，则可以附加事件处理程序，如下所示：

selectedInput.oninput = function updateTotal () {
  ...
}

这是我的实现，它选择所有带有类＆＃34; auto-sum＆＃34;的输入，为每个输入分配事件处理程序，并通过循环遍历每个输入来更新代码。 value属性：

https://jsfiddle.net/billy_reilly/5dd24v81/2/

Answer 9

function displaySum () {
  var sum = 0;
  // iterate over the input fields
  $('.auto-sum').each(function () {
    var value = $(this).val() || 0;
    var number = parseInt(value, 10); // parse the input value to an integer
    if (isNaN(number)) {
      number = 0;
    }
    sum += number; // add the value to the sum
  });
  // set the value of the two elements
  $('#amountTotal').text(sum);
  $('#total').val(sum);
}

// whenever the value of one of the input fields changes, call the displaySum function
$('.auto-sum').on('change, keyup', displaySum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">

TOTAL  <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">

如何计算表单字段值以更新隐藏字段值？

9 个答案: