/    Sign up×
Community /Pin to ProfileBookmark

Totalling a series of radio button sets

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 – [B]Shytalk[/B].

<!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></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(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.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[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>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@LeeUOct 01.2007 — You might be able to get some info here.
Copy linkTweet thisAlerts:
@shytalkauthorOct 02.2007 — Thanks but that doesn't actually update on the same page - it throws a popup. Nice try though. ?
Copy linkTweet thisAlerts:
@Orc_ScorcherOct 02.2007 — Where exactly is the problem, the total is updated immediately when I click on a radio button already?
Copy linkTweet thisAlerts:
@jo264751Oct 09.2007 — I'm actually have a similar problem, however mine does give you the real time answer, however the onclick function creates duplicates if there is someone cliking it several times, this is my code, any help will be appreciated.


<tr><td></td><td align="left">Complete & Accurate:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>YES<INPUT TYPE="radio" NAME="check2" value="15" onClick="clickCh(this)">

No <INPUT TYPE="radio" NAME="check2" value="0" onClick="clickCh(this)">N/A<INPUT TYPE="radio" NAME="check2" value="0" onClick="clickCh(this)"></td>

</tr>

<tr><td></td><td align="left">Implement in System:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>YES<INPUT TYPE="radio" NAME="check3" value="15" onClick="clickCh(this)">

No <INPUT TYPE="radio" NAME="check3" value="0" onClick="clickCh(this)">N/A<INPUT TYPE="radio" NAME="check3" value="0" onClick="clickCh(this)"></td>

</tr>

<tr><td>Appropriate presentation:</td><td></td><td>YES<INPUT TYPE="radio" NAME="check4" value="20" onClick="clickCh(this)">

No <INPUT TYPE="radio" NAME="check4" value="0" onClick="clickCh(this)">N/A<INPUT TYPE="radio" NAME="check4" value="0" onClick="clickCh(this)"></td>

</tr>

<tr><td>Notes:</td><td></td><td>YES<INPUT TYPE="radio" NAME="check5" value="15" onClick="clickCh(this)">

No <INPUT TYPE="radio" NAME="check5" value="0" onClick="clickCh(this)">N/A<INPUT TYPE="radio" NAME="check5" value="0" onClick="clickCh(this)"></td>

</tr>

<tr><td>Thank and Close:</td><td></td><td>YES<INPUT TYPE="radio" NAME="check6" value="5" onClick="clickCh(this)">

No <INPUT TYPE="radio" NAME="check6" value="0" onClick="clickCh(this)">N/A<INPUT TYPE="radio" NAME="check6" value="0" onClick="clickCh(this)"></td>

** and my java function is

<script language="JavaScript"><!--

function calculate(what) {

what.answer.value =0;

for (var i=1,answer=0;i<9;i++)


answer += (what.elements['Checkbox' + i].checked)&(what.elements['Checkbox' + i].value-0);

what.answer.value = answer;

}

//--></script>

If we can get a rule that will not allow clicking double clicking or a max value for each check (I know it can be done on checkbox, but I must keep this format)


Thank you in advance
×

Success!

Help @shytalk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...