计算输入值

Count input values

本文关键字：输入 计算      更新时间：2023-09-26

我想在不刷新页面的情况下计算插入表单中的值。如果所有输入都设置了相同的"name='test'"，则下面的代码运行良好，但我需要名称是唯一的，以便在使用php提交表单后处理表单。

有人知道我如何使用javascript/jquery中的"id='count'"来获取输入值吗？

提前感谢您的帮助。

例如

function findall() {
  var array = document.getElementsByName('price_no_vat');
  var total = 0;
  for (var i = 0; i < array.length; i++) {
    if (parseInt(array[i].value))
      total += parseInt(array[i].value);
  }
  document.getElementById('3').value = total;
}
<input id="1" name="price_no_vat" onblur="findall()">
<input id="2" name="VAT" onblur="findall()">
<input id="3" mame="all" disabled>

我不懂其中的逻辑。简单地说，你可以做到：

$(function () {
  $("input").blur(function () {
    $("#3").val(function () {
      var i1 = parseFloat($("#1").val());
      var i2 = parseFloat($("#2").val());
      i1 = isNaN(i1) ? 0 : i1;
      i2 = isNaN(i2) ? 0 : i2;
      return i1 + i2;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" name="price_no_vat" />
<input id="2" name="VAT" />
<input id="3" mame="all" disabled />

使用纯JavaScript，您可以实现以下目标：

function recalc() {
  var i1 = parseFloat(document.getElementById("1").value);
  var i2 = parseFloat(document.getElementById("2").value);
  i1 = isNaN(i1) ? 0 : i1;
  i2 = isNaN(i2) ? 0 : i2;
  document.getElementById("3").value = i1 + i2;
}
<input id="1" name="price_no_vat" onblur="recalc()" />
<input id="2" name="VAT" onblur="recalc()" />
<input id="3" mame="all" disabled />

您可以指定一个公共类，然后Document.querySelectorAll()可以与类选择器一起使用。

返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先预排序遍历）。

function findall() {
  var array = document.querySelectorAll('.cls');
  var total = 0;
  for (var i = 0; i < array.length; i++) {
    if (parseInt(array[i].value))
      total += parseInt(array[i].value);
  }
  document.getElementById('3').value = total;
}
<input id="1" name="price_no_vat" class='cls' onblur="findall()">
<input id="2" name="VAT" class='cls' onblur="findall()">
<input id="3" name="all" disabled>

$('#1).val();将向您显示id="1" 的值

如果你想得到所有的

 $.each('input', function(idx, obj) {
     console.log($(obj).val());
     //you can set a counter, and add items, you can push it into an array,
     //you can write condition here, etc...
 });


$(function () {
    $("input").blur(function () {
        $("#3").val(function () {
            var i1 = 0;
            $("[name='price_no_vat']").each(function (index, element) {
                i1 += parseFloat(element.value) || 0;
            });
            var i2 = parseFloat($("#2").val()) || 0;
            return i1 + i2;
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" name="price_no_vat" />
  <input id="12" name="price_no_vat" />
<input id="2" name="VAT" />
<input id="3" mame="all" disabled />

试试这个

$('input:not([id="3"])').blur(function(e) {
  var total = 0;
  $('input:not([id="3"])').each(function(idx, obj) {
    thisval = parseInt($(this).val());
    thisval = isNaN(thisval) ? 0 : thisval;
    total = total + thisval;
  });
  $("#3").val(total);
});

Fiddle

相关文章：