Home/ Questions/Q 6619395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:57:43+00:00

I have this simple script. I’m trying to get the checked values and add

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a few basic Javascript errors:

    1. 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?)

    2. 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.

    3. 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 + ....

    4. 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.

    • 0