CODEWITHSUNDEEP
javascriptjquery
RydelHouse
RydelHouse

Reputation: 362

Count generated inputs integer values with jQuery

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?

Upvotes: 0

Views: 350

Answers (4)

Thriggle
Thriggle

Reputation: 7049

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

Upvotes: 1

nerdcoder
nerdcoder

Reputation: 409

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);
});

Upvotes: 1

3coins
3coins

Reputation: 1342

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);  
  });

Upvotes: 2

ahmad valipour
ahmad valipour

Reputation: 303

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

Upvotes: 1

Related Questions