Calculating totals when clicking checkboxes

Question

I have a list of radio buttons represented by this code:

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

Whenever a button is selected I need the subtotal and total to be updated.

This is how i want it to look.

Subtotal: <br />
Tax:<br />
Total:<br />

Where tax is always %7 or .7

The prices of menu 1 through 7 increments by $5. Menu1 is $5, menu2 is $10 and so forth.

I was trying to figure out the JavaScript to this but the problem is that i don't want it to display right after the buttons I want it displayed on the bottom of the page.
If I do document.write the whole page gets overwritten. Please help me on this issue guys. I am sure it's really simple.

Answer 1

Preamble

This sounds like homework to me. However, I find that the best way to learn, is by example.
So here's me, leading by example, OK?

You didn't give me much to go on, so for the sake of this example, I'm assuming you've got a list of checkboxes or radiobuttons that say Menu 1... Menu n. Each checkbox that is checked will be added to the subtotal, and then the tax calculated on top of that.
Doing it with radio buttons is a little easier, so I added that example as well.

On the bottom of the post are references for future study on what is used in this example. If you have any further questions please ask them in the comment area at the bottom of this post.

---

The Javascript (checkboxes) | JSFiddle example (see it in action)

//Set the tax and base cost
var f_tax = 0.07,
    i_menu_base = 5;

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_checkboxes = e_menu.getElementsByTagName("input"),
    e_subtotal = document.getElementById("sub_total");

// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_checkboxes.length; i++){
    e_checkboxes[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal();
    }
}

//get_subtotal calculates the subtotal based on which checkboxes are checked
function get_subtotal(){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    for(var i = 1; i <= e_checkboxes.length; i++){
        //If the checkbox is checked, add it to the total
        if(e_checkboxes[i-1].checked){
            f_sub_total += i * i_menu_base;
        }
    }

    //Calculate the grand total
    f_grand_total = f_sub_total*(1+f_tax);

    //Format them
    subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
    tax = (Math.round(f_tax*10000)/100).toFixed(2);
    grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);

    //Add them to the display element
    e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
    e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
    e_subtotal.innerHTML += "Total: "+grandtotal;
}

---

The Javascript (radio buttons) | JSFiddle example (see it in action)

//Set the tax
var f_tax = 0.07,
    i_menu_base = 5;

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_radios = e_menu.getElementsByTagName("input"),
    e_subtotal = document.getElementById("sub_total");

// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_radios.length; i++){
    e_radios[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal(this);
    }
}

//get_index gets the index of the element (1..n)
function get_index(element){
    for(var i = 1; i <= e_radios.length; i++){
        if(e_radios[i-1] == element){
            return i;
        }
    }
}

//get_subtotal calculates the subtotal based on the radio that was changed
function get_subtotal(el){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    f_sub_total += get_index(el) * i_menu_base

    //Calculate the grand total
    f_grand_total = f_sub_total*(1+f_tax);

    //Format them
    subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
    tax = (Math.round(f_tax*10000)/100).toFixed(2);
    grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);

    //Add them to the element
    e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
    e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
    e_subtotal.innerHTML += "Total: "+grandtotal;
}

---

References for future study

In order in which they appear

• getElementById()
• getElementsByTagName()
• looping through an array
• onchange
• Math.round(), decimal trick and toFixed()
• innerHTML

Answer 2

Despite any additonal input from you, and my better judgement, I was bored so I did it all.

HTML:

<form id="menu4strombolis">input1
    <input type="radio" name="menu1" value="5">
    <br>input2
    <input type="radio" name="menu2" value="10">
    <br>input3
    <input type="radio" name="menu3" value="15">
    <br>input4
    <input type="radio" name="menu4" value="20">
    <br>input5
    <input type="radio" name="menu5" value="25">
    <br>input6
    <input type="radio" name="menu6" value="30">
    <br>input7
    <input type="radio" name="menu7" value="35">
    <br>
</form>
<button id="getTotal">Total</button>
<div id="subtotal">Sub-Total:</div>
<div id="tax">Tax:</div>
<div id="total">Total:</div>

JS:

var button = document.getElementById("getTotal");

button.onclick = function () {
    var subtotalField = document.getElementById("subtotal");
    var radios = document.forms["menu4strombolis"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            subtotal += parseInt(radios[i].value);
        }
    }

    tax = (subtotal * .07).toFixed(2); ;
    total = subtotal + tax;

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};

and the working fiddle:

http://jsfiddle.net/RGvTt/1/

Though on a side note, you should either group some of the radios together in the same group... or make them checkboxs.

Updated to fix the bug that the OP couldn't fix:

http://jsfiddle.net/RGvTt/4/

Need to use parseFloat.

iPhone fiddle programming FTW!

Answer 3

What you want is element.innerHTML

So it would look something like this:

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

 ..... ..html stuff here

 Subtotal: <span id="subtotal"></span><br/>
 Tax: <span id="tax"></span><br/>
 Total: <span id="total"></span><br/>
 ETC...

 <script>
      var subtotal = //whatever menu item is checked then .value();
      var span_subtotal = document.getElementById("subtotal);
      var tax = document.getElementById("tax");
      var total = document.getElementById("total");
      var the_tax = subtotal * .07;

      span_subtotal.innerHTML = subtotal;
      tax.innerHTML = the_tax;
      total.innerHTML = subtotal + the_tax;
 <script>