I would like to count values inserted into a form without refreshing the page. The below code works well if all of the inputs have "name='test'" set the same but I need name to be unique to process the form once its submitted using php.

Does anyone know how I can get the input values using "id='count'" with javascript/jquery?

Thanks in advance for your help.

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>

I would like to count values inserted into a form without refreshing the page. The below code works well if all of the inputs have "name='test'" set the same but I need name to be unique to process the form once its submitted using php.

Does anyone know how I can get the input values using "id='count'" with javascript/jquery?

Thanks in advance for your help.

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>

• javascript
• jquery

5 Answers 5

I don't understand the logic. In simple words, you can do:

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

Using pure JavaScript, you can achieve this:

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

You can specify a mon class, then Document.querySelectorAll() can be used with Class Selector.

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors.

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(); will show you the value of the id="1"

If you want to get all of them

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

Try this

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