jackcharon
Technical User
I am running a quiz that needs visitors to rate on a scale of 1 to 10 (or whatever) and there needs to be displayed a running total of their ratings as they click. The (cut down) code example below works fine (so far) but has the irritating habit of only updating *after* the user clicks somewhere else. How can this be made to update automatically each time a selection is made?
Any help very greatly appreciated TIA - Shytalk.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<html lang="en" dir="ltr">
<head><title>Order form</title></head>
<body>
<form id="myForm" action="" method="post">
<label><input name="first" type="radio" value="0">0</label>
<label><input name="first" type="radio" value="1">1</label>
<label><input name="first" type="radio" value="2">2</label>
<label><input name="first" type="radio" value="3">3</label><br /><br />
<label><input name="second" type="radio" value="1">1</label>
<label><input name="second" type="radio" value="2">2</label>
<label><input name="second" type="radio" value="3">3</label><br /><br />
<label><input name="third" type="radio" value="1">1</label>
<label><input name="third" type="radio" value="2">2</label>
<label><input name="third" type="radio" value="3">3</label><br /><br />
<label><input name="fourth" type="radio" value="1">1</label>
<label><input name="fourth" type="radio" value="2">2</label>
<label><input name="fourth" type="radio" value="3">3</label>
<label><input name="fourth" type="radio" value="4">4</label><br /><br />
<label>Your total:
<input id="total" type="text" value="0"></label>
<input type="submit" value="Send"></form>
<script type="text/javascript">
// Script must be placed below the form
Number.prototype.toCurrency = function(c, t, d) {
var n = +this, s = (0 > n) ? '-' : '', m = String(Math.round(Math.abs
)), 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.myForm.elements,T = E.total;
function calculateTotal() { var t = 0, e, v;
// each radio set needs a line in here
if((e = getChecked('first', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('second', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('third', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('fourth', this.form, 'radio'))) {t += +e.value;}
T.value = (t); }
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).type) && c.checked && (f == c.form)) {return c;}}}
for(var i = 0, n = E.length; i < n; ++i) {if('radio' == E.type) {E.onchange = calculateTotal;}}
E = null; })(); }
</script>
</body></html>
Any help very greatly appreciated TIA - Shytalk.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<html lang="en" dir="ltr">
<head><title>Order form</title></head>
<body>
<form id="myForm" action="" method="post">
<label><input name="first" type="radio" value="0">0</label>
<label><input name="first" type="radio" value="1">1</label>
<label><input name="first" type="radio" value="2">2</label>
<label><input name="first" type="radio" value="3">3</label><br /><br />
<label><input name="second" type="radio" value="1">1</label>
<label><input name="second" type="radio" value="2">2</label>
<label><input name="second" type="radio" value="3">3</label><br /><br />
<label><input name="third" type="radio" value="1">1</label>
<label><input name="third" type="radio" value="2">2</label>
<label><input name="third" type="radio" value="3">3</label><br /><br />
<label><input name="fourth" type="radio" value="1">1</label>
<label><input name="fourth" type="radio" value="2">2</label>
<label><input name="fourth" type="radio" value="3">3</label>
<label><input name="fourth" type="radio" value="4">4</label><br /><br />
<label>Your total:
<input id="total" type="text" value="0"></label>
<input type="submit" value="Send"></form>
<script type="text/javascript">
// Script must be placed below the form
Number.prototype.toCurrency = function(c, t, d) {
var n = +this, s = (0 > n) ? '-' : '', m = String(Math.round(Math.abs
)), 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.myForm.elements,T = E.total;
function calculateTotal() { var t = 0, e, v;
// each radio set needs a line in here
if((e = getChecked('first', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('second', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('third', this.form, 'radio'))) {t += +e.value;}
if((e = getChecked('fourth', this.form, 'radio'))) {t += +e.value;}
T.value = (t); }
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).type) && c.checked && (f == c.form)) {return c;}}}
for(var i = 0, n = E.length; i < n; ++i) {if('radio' == E.type) {E.onchange = calculateTotal;}}
E = null; })(); }
</script>
</body></html>
