Javascript Radio / Checkbox Problems

Question

I have this simple script. I'm trying to get the checked values and add them to a running total that's in the diabled input box. I know it's getting checked option but it's not updating to the input box and I'm not sure why. Can anyone help me?

<html>
<head>
<script type="text/javascript">
    function updateForm()
    {
        var type = document.pizzaForm.pizzaType;
        var toppings = document.pizzaForm.toppings; 
        var pizzaType;
        var toppings;

        for(var i = 0; i <= type.length; i++)
        {
            if(type[i].checked)
            {
                total = type[i].value;
            }
        }

        for(var i = 0; i <= toppings.length; i++)
        {
            if(toppings[i].checked)
            {
                toppings += toppings[i].value;
            }
        }

        var total = pizzaType + toppings;

        pizzaForm.total.value = total;
    }
</script>
</head>
<body>
    <h1>Order Pizza Here:</h1>
    <form action="" method="get" name="pizzaForm">
        What Type of Pizza Would You Like? <br />
        <input type="radio" name="pizzaType" value="10.00" onchange="updateForm()" />Vegetarian<br />
        <input type="radio" name="pizzaType" value="20.00" onchange="updateForm()" />Meat Lovers<br />
            <br />
            <br />
        Extra Toppings: <br />
        <input type="checkbox" name="toppings" value="2.00" onchange="updateForm()" />Extra Cheese <br />
        <input type="checkbox" name="toppings" value="3.00" onchange="updateForm()" />Mushrooms <br />
        <input type="checkbox" name="toppings" value="4.00" onchange="updateForm()" />Anchovies <br />
            <br />
        Total <input type="text" disabled="disabled" name="total" />
    </form>
</body>
</html>

James Khoury · Accepted Answer · 2011-09-29 02:43:39Z

5

You have a few basic Javascript errors:

your for loops look like:
```
for(var i = 0; i <= type.length; i++)
```
this means they will go from 0 to length (including length) = length + 1
It should be:
```
for(var i = 0; i < type.length; i++)
```
see the diffference? <= is now <. (off by one error?)
you are using toppings variable twice. (javascript is really bad with this and lets you shoot yourself in the foot.) Also you should be initialisng all values.
```
var type = document.pizzaForm.pizzaType;
var toppings = document.pizzaForm.toppings; 
var pizzaTypeValue = 0;
var toppingsValue = 0;
```
I've also added Value to the variables that hold numbers rather than elements. Other might prefix this or some such convention to remember it holds a value not a list of elements.
the values in markup are strings use parseFloat( to turn them into floats:
```
pizzaTypeValue += parseFloat(type[i].value); 
```
also note the += means: add this to me. Equivalent to pizzaTypeValue = pizzaTypeValue + ....
there is no real need for the total variable. just add a comment if you want to remember it is the total.

See this jsFiddle: http://jsfiddle.net/F53ae/ to see it in action.

answered Sep 29, 2011 at 2:43

James Khoury

22.6k4 gold badges36 silver badges66 bronze badges

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

4 Comments

Dennis Over a year ago

+1 Beat me to it. Good summation. You don't need two total variables, just sum everything into one but that's minor. Also better would be to just define one counter at the top instead of declaring var i twice.

James Khoury Over a year ago

@Dennis you are right about both the two total variables and the declaring i twice. I thought my answer was getting a bit long and I didn't think those things were really needed. Also I was assuming this is a homework question (reminds me of one I did in my Data Structures class except we had to use c++) and i wanted to leave some trace of the OP in it. ;)

Howdy_McGee Over a year ago

Yeah I really wish the browser javascript debuggers were a bit more indepth like most programming IDE's. I completely forgot that even though value is a number it is still a string! Thanks! I still don't quite understand the "<=" issue. If it equals the length I would still want it to loop through I would think. Thank you!

James Khoury Over a year ago

@Howdy_McGee in a list: [ "meh", "tah", "Bah"] the indexes are 0, 1, 2 and the length is 3. So <= means you'll try and access list[3] which will throw an error and your function won't complete.

frosty · Accepted Answer · 2011-09-29 02:44:29Z

1

Here is the working code. I put it in jsfiddle for you. The main problem was that you had two variables named toppings. Also, in the first loop, you were setting the "total" variable, when you meant to set the other total. Check it out. http://jsfiddle.net/eXPAj/1/

answered Sep 29, 2011 at 2:44

frosty

21.8k8 gold badges58 silver badges78 bronze badges

1 Comment

Howdy_McGee Over a year ago

I wish I could give you both the green check but the above poster had a more in-depth explanation. Thank you though!

Collectives™ on Stack Overflow

Javascript Radio / Checkbox Problems

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related