I'm trying to make a registration form, and one part of that is it needs to be able to add the values of input types and displays it at the bottom. This is what I've done for the JS; //Calculate checkbox var total = 0; function ShowTotal(obj){ var price; var i; if (obj.checked) total = total + eval(obj.value); else total = total - eval(obj.value); return; } //Calculate radio var pro = 0; function ShowProTotal(obj) { var price; var i; if (obj.checked) pro = pro + eval(obj.value); else pro = pro - eval(obj.value); return; } //Calculates total cost function getTotal(){ var totalCost = ShowTotal() + ShowProTotal(); document.getElementById("regform").cost.value = totalCost; } Code (markup): And this is the HTML parts of it which are affected by it; //Checkbox <dd> <label> <input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Monday </label> <label> <input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Tuesday </label> <label> <input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Wednesday </label> </dd> //Radio buttons <dd> <label> <input name="proceedings" value="50" type="radio" checked="checked" onclick="getTotal();" />Yes </label> <label> <input name="proceedings" value="0" type="radio" onclick="getTotal();" />No </label> </dd> //Where result should be displayed <dd> <input id="cost" name="cost" class="formtextfield" type="text" /> </dd> Code (markup): I've omitted the rest of the code out for clarity, I'm not entirely sure where the problem is because when I try it with just the Checkbox it seems to be displaying the result fine. I'm probably doing something very wrong with the funtions. Any help on this would be very much appreciated. Thanks
i would have been very eager to help you but both your script and html makes it difficult. First, i sense some basic form rules are broken in your code. Make your html like this for better manipulation //checkbox <dd id="checkboxitems"> <label> <input name="attend[]" value="50.00" type="checkbox"/> </label> <label> <input name="attend[]" value="50.00" type="checkbox"/> </label> <label> <input name="attend[]" value="50.00" type="checkbox"/> </label> </dd> //radio buttons <dd id="radioitems"> <label> <input name="proceedings" value="50.00" type="radio"/> </label> <label> <input name="proceedings" value="0" type="radio"/> </label> </dd> //result <dd id="result"> <label> <input id="cost" name="cost" class="formtextfield" type="text"/> </label> </dd> //submit button <dd> <label> <input type="submit" value="compute" onclick="getTotal(); return false;"/> </label> </dd> Code (markup): With your html code in the above format script processing is much more easier NOTE: 1. Attach id's to <dd> tag to facilitate processing of form data in groups 2. notice the checkbox name is in the form name="attend[]", so that you can access your checked items from an array 3. Attached all javascript handlers to the submit button instead of individual form elements as all selected form elements would be processed as soon as the button is clicked 4. As is, your form will not be submitted. If you want it to be submitted remove "return false;" from the onclick handler on the submit button.