Using hidden form controls are totally unnecessary and just add junk into the markup (and form data).
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Order form</title>
<style type="text/css">
@media screen {
body {
font: 100% sans-serif;
}
h1 {
font: 130% normal sans-serif;
text-align: center;
}
fieldset {
border-style: none;
margin: 0 0 1em;
padding: 0.5ex;
}
label {
display: block;
margin-left: 1em;
width: 12em;
}
legend {
font-weight: bold;
margin: 0;
padding: 0;
}
#order {
position: relative;
}
#total {
display: block;
margin-left: auto;
margin-right: auto;
width: 6em;
}
#total-group {
border-style: none;
text-align: center;
position: fixed;
right: 10%;
top: 20%;
width: 8em;
}
#total-group legend {
display: none;
}
#total-label {
margin-bottom: 0.75em;
margin-left: 0;
width: auto;
}
}
</style>
</head>
<body>
<h1>Computer A</h1>
<form id="order" action="" method="post">
<fieldset><legend>Processor</legend>
<label><input name="processor" type="radio" value="0" checked>
Default option</label>
<label><input name="processor" type="radio" value="50">
Upgrade 1 ($50.00)</label>
<label><input name="processor" type="radio" value="100">
Upgrade 2 ($100.00)</label>
</fieldset>
<fieldset><legend>Memory</legend>
<label><input name="memory" type="radio" value="0" checked>
Default option</label>
<label><input name="memory" type="radio" value="50">
Upgrade 1 ($50.00)</label>
<label><input name="memory" type="radio" value="100">
Upgrade 2 ($100.00)</label>
</fieldset>
<fieldset><legend>Hard Drive</legend>
<label><input name="hard-drive" type="radio" value="0" checked>
Default option</label>
<label><input name="hard-drive" type="radio" value="50">
Upgrade 1 ($50.00)</label>
<label><input name="hard-drive" type="radio" value="100">
Upgrade 2 ($100.00)</label>
</fieldset>
<fieldset id="total-group"><legend>Total</legend>
<label id="total-label">Your total:
<input id="total" type="text" value="$0.00"></label>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</fieldset>
</form>
<script type="text/javascript">
Number.prototype.toCurrency = function(c, t, d) {
var n = +this,
s = (0 > n) ? '-' : '',
m = String(Math.round(Math.abs(n))),
i = '',
j, f;
c = c || '';
t = t || '';
d = d || '.';
while (m.length < 3) {m = '0' + m;}
f = m.substring((j = m.length - 2));
while (j > 3) {i = t + m.substring(j - 3, j) + i; j -= 3;}
i = m.substring(0, j) + i;
return s + c + i + d + f;
};
if(document.getElementsByName) {
(function() {
var E = document.forms.order.elements,
T = E.total;
function calculateTotal() {
var t = 0,
e, v;
if((e = getChecked('processor', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('memory', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('hard-drive', this.form, 'radio'))) {t += +e.value;}
T.value = (t * 100).toCurrency('$');
}
function getChecked(gN, f, t) {
var g = document.getElementsByName(gN);
t = t || 'checkbox';
for(var i = 0, n = g.length, c; i < n; ++i) {
if((t == (c = g[i]).type) && c.checked && (f == c.form)) {return c;}
}
}
for(var i = 0, n = E.length; i < n; ++i) {
if('radio' == E[i].type) {
E[i].onchange = calculateTotal;
}
}
E = null;
})();
}
</script>
</body>
</html>
Of course, you should export the style sheet and script into external files.
You may notice that the calculateTotal function expects numbers, not product identifiers. The simplest and cleanest way to adapt the script is to include the prices as script data. So, taking processors as an example, you would include something like:
Code:
var processors = {
'P4_3.2' : 0,
'P4_3.4' : 10,
'P4_3.6' : 20,
'P4_3.8' : 30,
'P4_4.0' : 40
};
and alter calculateTotal to:
Code:
function calculateTotal() {
var t = 0,
e, v;
if((e = getChecked('processor', this.form, 'radio'))) {t += processors[e.value];}
if((e = getChecked('memory', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('hard-drive', this.form, 'radio'))) {t += +e.value;}
T.value = (t * 100).toCurrency('$');
}
The other components follow suit.
Hope that helps,
Mike
Auto-totaling order form using radio buttons
Reply With Quote
I think I am having a problem totaling the currency values. I'm going to reattach my updated page as a text file hoping someone can take a look and give some advice on calculating all the hidden fields into the grand total. thanks
Thanks a bunch Mike. This is working great.
Originally Posted by mwinter
Bookmarks