计算输入值

时间:2016-05-12 09:16:38

标签: javascript jquery

我想计算插入表单的值而不刷新页面。如果所有输入的“name ='test'”设置相同,则下面的代码很有效,但是我需要名称是唯一的,以便在使用php提交表单后处理该表单。

有没有人知道如何使用javascript / jquery使用“id ='count'”来获取输入值?

提前感谢您的帮助。

e.g。

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>

5 个答案:

答案 0 :(得分:6)

我不明白逻辑。简单来说,你可以这样做:

$(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 />

答案 1 :(得分:0)

您可以指定一个公共类,然后Document.querySelectorAll()可以与Class Selector一起使用。

  

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

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

$('#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...
 });

答案 3 :(得分:0)

$(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 />

答案 4 :(得分:0)

试试这个

$('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