Count generated inputs integer values with jQuery

Question

I have generated inputs like these:

<input type="text" id="rfq_ironilbundle_quotes_offer_price_0" name="rfq_ironilbundle_quotes[offer_price][0]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_1" name="rfq_ironilbundle_quotes[offer_price][1]" required="required" class="form-control offered-price">

These inputs can be more then two.

I need to count all prices in inputs, when user fill in and append on div element. How I can do that?

3coins · Accepted Answer · 2015-02-27 20:43:09Z

2

Here is an example that should do what you want. http://jsfiddle.net/yvy986nc/

Snippet for JS.

  $('input.offered-price').keyup(function(){
      var val = 0;
      $('input.offered-price').each(function(){
         try{
              val += parseInt($(this).val(), 10) || 0;    
          }catch(e){
              // just to catch parse int failures
          } 
      });
      $('#result').html(val);  
  });

answered Feb 27, 2015 at 20:43

3coins

1,3423 gold badges11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RydelHouse Over a year ago

Excellent! You have just saved me a lot of time! Thank you and best wishes! :)

ahmad valipour · Accepted Answer · 2015-02-27 20:26:05Z

1

you can declare one hidden field with default value zero that increase when added control and decrease when removed control

answered Feb 27, 2015 at 20:26

ahmad valipour

3032 silver badges11 bronze badges

Comments

nerdcoder · Accepted Answer · 2015-02-27 20:48:29Z

1

declare javascript variable to sum all input values when user fill them or leave them, look at the example.

http://jsfiddle.net/xb8gb8pm/2/

    var cart = {
    total: 0
};
$('.offered-price').blur(function () {
    cart.total = 0;
    $('.offered-price').each(function (i, idx) {
        price = $(idx).val().trim();
        cart.total += parseFloat(price !== '' ? price : 0);
    });
    $('.totalPrice').html('Total:'+cart.total);
});

answered Feb 27, 2015 at 20:48

nerdcoder

4093 silver badges8 bronze badges

Comments

Thriggle · Accepted Answer · 2015-02-27 21:07:43Z

Accessing all Inputs

If all your inputs will have the class "form-control offered-price" you can access them as an array of HTML elements like so var inputs = document.querySelectorAll(".form-control.offered-price");

Appending HTML

To append any HTML after an element, use element.insertAdjacentHTML("afterend",yourHTML); where yourHTML is a string containing valid HTML. You can also create an HTML element using var myChildElement = document.createElement("div") and then append that element to a parent element using myParentElement.appendChild(myChildElement);

Summation of all input values

One approach would be to attach an event listener to each input so that the div gets the recalculated sum every time an input changes, as in the code below.

var inputs = document.querySelectorAll(".form-control.offered-price");
inputs[inputs.length-1].insertAdjacentHTML("afterend","<div id='price_result'>");
(function(arr){
    for(var i = 0; i < arr.length; i++){
      if(arr[i].addEventListener){
        arr[i].addEventListener("keyup",function(){
          document.getElementById("price_result").innerHTML = sumValues(arr);
        });
      }else{
        arr[i].attachEvent("onkeyup",function(){
          document.getElementById("price_result").innerHTML = sumValues(arr);
        });
      }
    }
})(inputs);
function sumValues(arr){
  var sum = 0;
  for(var i = 0; i < arr.length; i++){
    sum += Number(arr[i].value,10);
  }
  return sum;
}

<input type="text" id="rfq_ironilbundle_quotes_offer_price_0" name="rfq_ironilbundle_quotes[offer_price][0]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_1" name="rfq_ironilbundle_quotes[offer_price][1]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_2" name="rfq_ironilbundle_quotes[offer_price][2]" required="required" class="form-control offered-price">

Collectives™ on Stack Overflow

Count generated inputs integer values with jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related