View Full Version : Form Total from Subtotals

12-27-2006, 12:30 AM
I have a very basic understanding of scripts so I could use some help.

I have a form that I've created using one of Vic's scripts. The form works well but I would like to add an additinal feature.

There are three sections with totals. How do I add these three totals together for a Grand Total?

So that you have an idea of the page and the script that I've already added to it, http://www.healthedcorp.com/candida_questionaire.html

I'd started with Section totals at the end of each section but wasn't sure how to transfer the results to the bottom and then to add them all together.

Thanks for any help.

12-27-2006, 02:53 PM

Here's a working example using portions of your form. Please test the code AS IS. That means, copy it, save it as an .html document, then open that document.

I changed the names of the subtotal fields, and I made all the numeric fields readonly. Also, you should not code the form with:


that's only for forms that upload files.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var prevState = [];

function calc(nForm,nBox){

var currGroup = nBox.name;
nForm['subTotal1'].value = 0;
nForm['subTotal2'].value = 0;
nForm['subTotal3'].value = 0;

var nInput = document.getElementsByTagName('input');

for (i=0; i<nInput.length; i++)
var testGroup = nInput[i].name;
if (nInput[i].type == "radio" && testGroup == currGroup)
if (prevState[i])
nInput[i].checked = false;

for (i=0; i<nInput.length; i++)
if (nInput[i].type == "radio")
if (nInput[i].checked && /^A/.test(nInput[i].name))
nForm['subTotal1'].value = Number(nForm['subTotal1'].value) + Number(nInput[i].value);

if (nInput[i].checked && /^B/.test(nInput[i].name))
nForm['subTotal2'].value = Number(nForm['subTotal2'].value) + Number(nInput[i].value);

if (nInput[i].checked && /^C/.test(nInput[i].name))
nForm['subTotal3'].value = Number(nForm['subTotal3'].value) + Number(nInput[i].value);
prevState[i] = nInput[i].checked;
nForm['grandTotal'].value = Number(nForm['subTotal1'].value) + Number(nForm['subTotal2'].value) + Number(nForm['subTotal3'].value);

function init(){

var nInput = document.getElementsByTagName('input');
for (i=0; i<nInput.length; i++)
if (nInput[i].type == "radio")
nInput[i].onclick = function()


<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:530px;margin:auto}
fieldset {width:500px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:arial;font-size:12pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;font-style:italic;font-weight:bold;letter-spacing:+1px}
label {font-family:tahoma;font-size:10pt;font-weight:bold;color:#dc143c;padding:5px;display:block;margin-left:20px}
.choiceLabel {font-family:times:font-size:12pt;color:#00008b;display:inline;margin-left:20px}
.sectionLabel {font-family:tahoma;font-size:14pt;margin-left:0px;background-color:#afeeee;color:#ff6347;margin-top:5px}
.totalLabel {font-family:tahoma:font-size:12pt;display:block}
.score {font-family:tahoma:font-size:12pt;text-align:right}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

<form method="post" action="">
<legend>Medical Assessment</legend>
<label class='sectionLabel'>Part A, History</label>
<label>Have you taken tetracylines (Sumycin, Panmycin, Vibramycin, Minocin, etc.) or other antibiotic for acne for 1 month or longer?</label>
<label class='choiceLabel'>Yes<input type="radio" value="50" name="A_1"></label>

<label>Have you taken birth control pills?</label>
<label class='choiceLabel'>More than 2 years<input type="radio" value="15" name="A_6"></label>
<label class='choiceLabel'>6 months to 2 years<input type="radio" class="TxtArea" value="8" name="A_6"></label>

<label class='sectionLabel'>Part B, Major Symptoms</label>
<label>Fatigue or lethargy?</label>
<label class='choiceLabel'>Mild<input type="radio" value="3" name="B_1"></label>
<label class='choiceLabel'>Moderate<input type="radio" value="6" name="B_1"></label>
<label class='choiceLabel'>Severe<input type="radio" class="TxtArea" value="9" name="B_1"></label>

<label>Numbness, burning or tingling?</label>
<label class='choiceLabel'>Mild<input type="radio" value="3" name="B_6"></label>
<label class='choiceLabel'>Moderate<input type="radio" value="6" name="B_6"></label>
<label class='choiceLabel'>Severe<input type="radio" value="9" name="B_6"></label>

<label class='sectionLabel'>Part C, Other Symptoms</label>
<label class='choiceLabel'>Mild<input type="radio" value="3" name="C_1"></label>
<label class='choiceLabel'>Moderate<input type="radio" value="6" name="C_1"></label>
<label class='choiceLabel'>Severe<input type="radio" value="9" name="C_1"></label>

<label>Sore or dry throat?</label>
<label class='choiceLabel'>Mild<input type="radio" value="3" name="C_22"></label>
<label class='choiceLabel'>Moderate<input type="radio" class="TxtArea" value="6" name="C_22"></label>
<label class='choiceLabel'>Severe<input type="radio" class="TxtArea" value="9" name="C_22"></label>

<label class='sectionLabel' style='text-align:center'>Assessment Score</label>
<label class='totalLabel'> Subtotal Part A:
<input type="text" value="0" name="subTotal1" size="5" class='score' readonly>

<label class='totalLabel'> Subtotal Part B:
<input type="text" value="0" name="subTotal2" size="5" class='score' readonly>

<label class='totalLabel'> Subtotal Part C:
<input type="text" value="0" name="subTotal3" size="5" class='score' readonly>

<label class='totalLabel'> Total:
<input type="text" value="0" name="grandTotal" size="5" class='score' style='margin-left:66px' readonly>

<input type='submit' name='submit' value="Submit" class='submitBtn'>

12-27-2006, 08:45 PM
Thanks, I will play with it and see if I can make it work.

The next step will be uploading the form to at least a flat file if not a MySQL database.

12-27-2006, 09:04 PM

I have a name. I would appreciate it if you addressed me by it. Machines don't post code here for others, people do.

See if you can make it work? It works.

While the field names that you used will POST in php, I tested it, I would change all of them, to use an underline instead of a period: A.1, should be A_1.

You shouldn't use tables/divs for page layout. Use CSS. I know it seems easier to use tables, but look at all the clutter in your code.

I have no idea why you need those hidden fields, but I didn't include them, because I didn't need them.

12-28-2006, 03:01 AM

I didn't mean to infer that there might something wrong with the code. I'm a novice so sometimes I struggle to get things just right for them to work. I usually prevail but sometimes it takes a bit.

As far as the html coding, I use what I know. I'm just learning how to use CSS more. Hoping in the next few months to learn more about CSS as I'm seeing how powerful it is.


01-08-2007, 08:30 PM

Thanks for the help. Finally was able to get back to this project.

It works like a charm and does exactly what I needed.

Thanks again,