Jquery sum input and selected checkboxes

Question

I'm trying to sum up my checked checkboxes and inputs with values in them. Currently I'm getting both separately (and it functions how I want it to) like this:

$(document).ready(function() {
  $('.box').change(function(){
    var totalbox = 0;
    $('.box:checked').each(function(){
        totalbox+= +($(this).attr("rel"));
    });
    $('#totalbox').val(totalbox.toFixed(2));
  });
});


$(document).on("recalc", ".vendor_accounts", function () {
  var totalinput = 0;
  $(this).find(".payment").each(function () {
    totalinput += +$(this).val();
  });
  $("#totalinput").val(totalinput.toFixed(2));
});

$(".vendor_accounts").trigger("recalc");

The above functions produce the right results separately. I just need to combine the values of those results and display them as one var inside an id.

Per the below answer, this is what did the trick:

function updateGrandTotalDisplayed(val){
  var input1 = parseFloat($('#checkTotal').val());
  var input2 = parseFloat($('#inputTotal').val());
  var total = input1 + input2;
  $('#totalPrice').val(total.toFixed(2));
};

cheryllium · Accepted Answer · 2017-09-16 02:28:20Z

1

One solution would be to place a total variable in a scope that's available to both of the functions that calculate a total. For instance, before all of your code, you can write:

var grandTotal = 0;

Then you can add each subtotal to the grandTotal variable when that subtotal is calculated. If you are displaying the total somewhere on the page, you could also call a function at that point to update the displayed total. So for example, in the first part, you can change it like so:

$(document).ready(function() {
  $('.box').change(function(){
    var total = 0;
    $('.box:checked').each(function(){
        total+= +($(this).attr("rel"));
    });
    $('#total').val(total.toFixed(2));
    grandTotal += total;
    updateGrandTotalDisplayed(); 
  });
});

(The updateGrandTotalDisplayed() would be a function you write elsewhere, and call here to update what is displayed on the page.) Hope this helps.

EDIT to add: If you just wish to sum the values without using a third variable, you can use the val() function to retrieve the values, and then add them together. For example, $('#totalinput').val() will give you the current value inside the #totalinput element.

However, you should note that you cannot rely on the two subtotals being calculated in a specific order. You don't know which calculation will happen or finish first.

edited Sep 16, 2017 at 2:28

answered Sep 16, 2017 at 1:55

cheryllium

5886 silver badges26 bronze badges

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

5 Comments

dfeva Over a year ago

Thanks, I've edited my code to be more clear on my situation. Honestly, I'm not at a point where I can write my own jquery functions ... I'm just happy I'm able to decipher info on this site to make it work with my application. Again, js is something I'm tackling next, I'm excited I'm able to somehow manipulate my backend data right now. Is there a way to just sum #totalbox and #totalinput together ?

cheryllium Over a year ago

@dfeva I edited my answer to add some info for you. The hardest difference between JS and other code (like PHP), imo, is that things happen asynchronously and you have to account for that.

dfeva Over a year ago

Thanks for your input. How would I go about writing a updateGrandTotalDisplayed() function that runs everytime totalinput or totalbox is changed? ..sorry, the only js functions I've used are mostly copy-and-paste with a few tweaks for ids and classes.

dfeva Over a year ago

I want to, naturally, write something like this (and I know it doesn't make sense): var totalbox = totalbox; var totalinput = totalinput total = totalbox + totalinput; $("#total").val(total.toFixed(2));

cheryllium Over a year ago

Have you tried anything from my answer? (I'm also not sure if comments are the right place for this, not super familiar with SO, maybe we want to move to chat?)

Collectives™ on Stack Overflow

Jquery sum input and selected checkboxes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related