Calculate total for radio button values [Archive]

kvolik

08-17-2004, 08:29 AM

Hello, maybe someone can help me with a form. I have a form with two sets (can be more) of radio buttons:
name=Set1 value="5", value="10", value="15.60"
name=Set2 value="10.50", value="15", value="25.30"

I need to add text field which will sum the values of selected radio buttons and a Submit button which will send a form with a list of selected choices.

Thanks in advance.

nitwit

08-17-2004, 12:36 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

fieldset {
float: left;
width: 60px;
padding: 5px;
margin-right: 4px;
}
legend {
font-weight: bold;
}
#total {
font-size: 11px;
width: 40px;
}

</style>
<script type="text/javascript">

function setRadios()
{
function sumRadios()
{
var total = 0, i = 1, oForm = this.form;
while (radgrp = oForm.elements['Set' + (i++)])
{
j = radgrp.length;
do
if (radgrp[--j].checked)
{
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total.toFixed(2);
}

var i = 0, input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
if (input.name.match(/^Set\d+$/))
input.onclick = sumRadios;
}

onload = setRadios;

</script>
</head>
<body>
<form id="f1">
<fieldset>
<legend>Set 1</legend>
<input id="r1" type="radio" name="Set1" value="5" /><label for="r1">5</label><br />
<input id="r2" type="radio" name="Set1" value="10" /><label for="r2">10</label><br />
<input id="r3" type="radio" name="Set1" value="15.60" /><label for="r3">15.60</label>
</fieldset>
<fieldset>
<legend>Set 2</legend>
<input id="r4" type="radio" name="Set2" value="10.50" /><label for="r4">10.50</label><br />
<input id="r5" type="radio" name="Set2" value="15" /><label for="r5">15</label><br />
<input id="r6" type="radio" name="Set2" value="25.30" /><label for="r6">25.30</label>
</fieldset>
<fieldset>
<legend>Set 3</legend>
<input id="r7" type="radio" name="Set3" value="1.80" /><label for="r7">1.80</label><br />
<input id="r8" type="radio" name="Set3" value="9.78" /><label for="r8">9.78</label><br />
<input id="r9" type="radio" name="Set3" value="24" /><label for="r9">24</label>
</fieldset>
<fieldset style="position:relative;top:36px;width:140px;">
<input id="total" type="text" name="total" value="" /><strong> total</strong>  
<input type="reset" style="font-size:11px;" />
</fieldset>
</form>
</body>
</html>

Didn't say if those were currency ($) so left them as is. google for 'javascript currency format' if you need to display the values as money. To submit the values: use a submit button. :D

kvolik

08-18-2004, 06:59 AM

Thanks a lot. That exactly what I needed!

rhasce

01-08-2008, 05:47 PM

Hon can i show what you have selected on this form on the next page like when a user clicks on the submit button?