CODEWITHSUNDEEP
jqueryhtml
Gman
Gman

Reputation: 783

how do I sum some input fields value (plus multiply is value by an attribute representing price)

I have a form where people enter quantities they want from a list of products. Each input value represent the amount they want and the attribute data-price stores the price of the product.

I am using this jquery code to sum put the fields values

   $(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".number.qty_input").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".number.qty_input").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#the_price_v_m").html(sum.toFixed(2));
    }

Now I need to customize it so that It allows me to multiply field value by attribute data-price each one of them has. I have already tried a few unsuccessfull methods and I wonder if I could get some help on this.

Thanks!

oh by the way the html I use is 

<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">

Upvotes: 0

Views: 1317

Answers (3)

T J
T J

Reputation: 43156

You don't have to manually iterate over the jQuery object to attach event handlers, jQuery does it for you. You can use the data() method to access the value of data attributes.

$(document).ready(function() {
  $(".number.qty_input").keyup(function() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".number.qty_input").each(function() {
      var price = $(this).data("price")
        //add only if the value and price is a number
      if (this.value.length && !isNaN(this.value) && !isNaN(price))
        sum += parseFloat(this.value) * parseFloat(price);
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#the_price_v_m").html(sum.toFixed(2));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<span id="the_price_v_m"></span>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

One approach, is to use a

// assign a keyup event-handler to each of the 'input.qty_input' elements:
$('input.qty_input').on('keyup', function(e) 
  // create a temporary variable (to avoid recreating a variable in the map():
  var tmp,
    // iterate over the .qty_input elements, using map()
    sum = $('.qty_input').map(function() {
      tmp = $(this);
      // returning the numeric result of the entered-value multiplied by the data-price:
      return (+tmp.val() * tmp.data('price')) || 0;
    // use get() to form an array:
    }).get().reduce(function(a, b) {
    // reducing the array to a single value, summing all the array-elements together:
      return a + b;
    });
  // assigning the sum to the '#result' element (or whatever you want to do):
  $('#result').text(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<span id="result"></span>

References:

Upvotes: 0

erikrunia
erikrunia

Reputation: 2383

Your question is a little confusing without html, but I think you want to multiply each item in the loop by it's price, which is stored in a data-* attribute. So change this line:

sum += parseFloat(this.value);

to this:

sum += parseFloat(this.value * $(this).data('price'));

some additional parsing may be neccessary without knowing your code too well:

sum += parseFloat(this.value) * parseFloat($(this).data('price'));

FYI:

.data('price') will get you the attribute named data-price on a jQuery object.

Upvotes: 2

Related Questions