JQUERY - Sum the fields value from a price list on the fly

Question

I have a price list and would like to display in a table a summary of the choices made by the user with its total price.

To do this I tried to do it this way

HTML

<div>
  <p>PICK ONE</p>
  <input type="radio" name="weight" value="range-1" checked><label>0-10 ($ 10)</label>
  <input type="radio" name="weight" value="range-2"><label>10-20 ($ 20)</label>
  <input type="radio" name="weight" value="range-3"><label>20-30 ($ 30)</label>
</div>

<div>
  <p>ADD EXTRA</p>
  <input type="checkbox" id="urgentchk" name="urgentchk" value="1" /><label>Urgent ($ 40)</label>
  <input type="checkbox" id="meetchk" name="meetchk" value="1" /><label>Meet ($ 60)</label>
</div>

<div>
  <p>TOTAL</p>
  <table id="items"></table>
  <table id="total"></table>
</div>

JQ

$('#urgentchk').change(function() {
   if(this.checked)
   {
      var content = "<tr id='one'><td>Urgent $ 40</td></tr>";
      var prize = parseFloat($(this).attr('prize'));
      $('#items').append(content);
   }
   else
   {
      $('#one').remove();
   }
});

$('#meetchk').change(function() {
   if(this.checked)
   {
      var content = "<tr id='two'><td>Meet $ 60</td></tr>";
      var prize = parseFloat($(this).attr('prize'));
      $('#items').append(content);
   }
   else
   {
      $('#two').remove();
   }
});

Now, unfortunately, I have two problems that I do not know how to solve:

Show the selected field (radiobutton) in the #items as done with the fields checkbox.
Calculate the the price (sum) of the selected fields in the #total.

How could I do this? thanks

FIDDLE

score 1 · Accepted Answer · answered Sep 30 '14 at 14:56

1

First of all you will need to create a function responsible for calculating the total. After that, you need to call this function every time you want your total to be recalculated: on page load, on change of elements, etc.

var updateTotal = function () {

    var total = 0;

    total += parseFloat($('input[name=weight]:checked').attr('prize'));

    total += ($('input[name=urgentchk]:checked').length > 0) ? parseFloat($('input[name=urgentchk]:checked').attr('prize')) : 0;

    total += ($('input[name=meetchk]:checked').length > 0) ? parseFloat($('input[name=meetchk]:checked').attr('prize')) : 0;

    $('#total').html("Total: $" + total);

};

Then you just need to call this function whenever you see fit:

updateTotal();

For example, after checking #meetchk:

$('#meetchk').change(function() {

   if(this.checked)
   {
      ...
   }

   updateTotal();

});

That will always recalculate the total price from scratch. It can be expensive at times, it really depends on your application. Please have a look at the fiddle below. Good luck!

http://jsfiddle.net/pq46skgn/5/

answered Sep 30 '14 at 14:56

o--oOoOoO--o

770
4
7

Is what I was trying to do! Just one thing. How can I show the content of the radio buttons in the div # Items? with another function? Thanks! – Paolo Rossi Sep 30 '14 at 15:08
sorry one last thing why use updateTotal var = function () instead of function updateTotal ()? thanks! – Paolo Rossi Sep 30 '14 at 15:13
You can use the "change" function for the radio and display the contents the same way you're doing with the checkboxes. Just use the selector $('input[name=weight]') Regarding your second question, you can start here: http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip – o--oOoOoO--o Sep 30 '14 at 15:25
Ideally "Items" should be generated/updated in updateTotal or similar function. – o--oOoOoO--o Sep 30 '14 at 15:34

JQUERY - Sum the fields value from a price list on the fly

1 Answers1