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

Question

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

You want to multiply the value entered into the <input> by the data-price attribute, and then sum the total? — David Thomas
– David Thomas, Commented Nov 9, 2014 at 15:58
sum += parseFloat(this.value)*parseFloat(this.getAttribute("data-price")); — Sampath Liyanage
– Sampath Liyanage, Commented Nov 9, 2014 at 16:05

Ram · Accepted Answer · 2014-11-09 15:58:34Z

2

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.

edited Nov 9, 2014 at 15:58

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Nov 9, 2014 at 15:51

erikrunia

2,4731 gold badge18 silver badges28 bronze badges

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

4 Comments

Ram Over a year ago

DOM elements don't have .data() method. this.dataset.price or $(this).data('price') ?

Gman Over a year ago

hi, I updated it with my html thanks for your help. I tried to use it but it didn't returned any value. I am traying whaty @Vohuman said and see if it works. Thanks guys.

Gman Over a year ago

GUYS YOU ARE AMAZING!! Thanks for the help it worked!! I am not so good at javascript :/

erikrunia Over a year ago

thanks @vohuman, for some reason i was assuming the "this" returned within a jquery each was already jquerified.. :-) my bad, thanks for the update

David Thomas · Accepted Answer · 2014-11-09 16:04:18Z

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:

JavaScript:
- Array.prototype.reduce().
jQuery:
- get().
- map().
- on().
- text().

T J · Accepted Answer · 2014-11-09 16:07:54Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related