checkboxes add to a running total (in a form)???

[James Greig]

hello people,

i'm just learning javascript, could someone point me in the direction
of an example of the following, or give me some clues as to how it
might be done:

what i would like to do is make a self totalling version of this page

http://www.ayrshirehousing.org.uk/applications/applications.html

so that basically as a person checked or unchecked boxes, a
corresponding value would be added/taken away from a total score at
the bottom of the form.

(also one other question, how do you set it up so that a person can
only check one box out of say 3 possible options? so that if they
check another box, the last one they selected is unchecked)

many thanks,

james g.

 

[Michael Winter]

James Greig wrote on 22 Nov 2003:

hello people,

i'm just learning javascript, could someone point me in the
direction of an example of the following, or give me some clues
as to how it might be done:

what i would like to do is make a self totalling version of this
page

so that basically as a person checked or unchecked boxes, a
corresponding value would be added/taken away from a total score
at the bottom of the form.

This is what I would do:

Create a form using check-boxes and radio buttons, assigning the
number of points as the 'value' for each control.

Create a JavaScript function that loops through all the form's
controls (see Form.elements collection) adding up the values then
displaying it in a text box at the bottom of the page.

Place 'onclick' events on each check-box and radio button calling
that function.

(also one other question, how do you set it up so that a person
can only check one box out of say 3 possible options? so that if
they check another box, the last one they selected is unchecked)

Use a radio button instead. By design, only one option can be
selected at a time*. Check boxes should only be used when the user
can select any of the available options.

I hope that gives you somewhere to start from.

Mike

* If the group might not apply - that is, if a circumstance is true,
they have one of three options, if not, they don't select any of them
- you could place a controlling check box that, if not checked,
causes the radio button group to be disabled or ignored.

 

[Lasse Reichstein Nielsen]

i'm just learning javascript, could someone point me in the direction
of an example of the following, or give me some clues as to how it
might be done:

what i would like to do is make a self totalling version of this page

so that basically as a person checked or unchecked boxes, a
corresponding value would be added/taken away from a total score at
the bottom of the form.

I think I would just compute the total from scratch each time
something changes.

What I would do was to give each checkbox or radiobutton a value
attribute that contained the value it adds to the total, and then
run through the form like:

function calculate() {
var elems = document.forms['formID'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems.checked) {total += +(elems.value);}
}
elems['total'].value = total;
}

and a form:

<form id="formID">
...
<label for="noBathOrShower">
<input type="checkbox" onclick="calculate()"
id="noBathOrShoewe" value="20">
No bath or shower (20)</label>
...
<label for="noHotRunningWater">
<input type="checkbox" onclick="calculate()"
id="noHotRunningWAter" value="20">
No hot running water (20)</label>
...
...
<input type="text" name="total">
</form>

You will have to think some more about cases like "Each additional
bedroom extra ....10". Either use a select element or a text input,
and change the calculate function appropriately.

(also one other question, how do you set it up so that a person can
only check one box out of say 3 possible options? so that if they
check another box, the last one they selected is unchecked)

That sounds like radiobuttons, not checkboxes. If given the same
control name, they automatically uncheck when another in the group
is checked.

/L

 

[james greig]

thanks you both for the advice.

i have started building the form as suggested using checkboxes, and have
now started adding radio boxes where necessary.

but i have hit a problem, each set of radio boxes has to have a unique
name, but the script i'm using to add up the total assumes that all the
radioboxes/checkboxes have the same name (Conditions).

the totalling script i'm using is:

<script language="JAVASCRIPT">
var total = 0;

function calculatetotals()
{
total = 0;
form = document.housingapplication;
for (i=0; i< form.Conditions.length; i++) {
if (form.Conditions.checked) {
total += parseInt(form.Conditions.value);
}
}
form.total.value = total;
}
</script>

am not sure how to modify this so that it adds up all of the numbers, ie
Condition1 + Condition2 + Condition3 + Condition4....

any ideas?

 

[Lasse Reichstein Nielsen]

thanks you both for the advice.

i have started building the form as suggested using checkboxes, and have
now started adding radio boxes where necessary.

but i have hit a problem, each set of radio boxes has to have a unique
name, but the script i'm using to add up the total assumes that all the
radioboxes/checkboxes have the same name (Conditions).

Bad idea. Give them names as appropriate, and then give them all
id's starting with "Condition". Then run through all the form controls
and only add the ones where the id starts with "Condition".

the totalling script i'm using is:

<script language="JAVASCRIPT">

In HTML 4, the type attribute is required, and it is always sufficient.

var total = 0;

Move this line into calcualtetotals.

function calculatetotals()
{
total = 0;

i.e.,
var total = 0;
The "var" makes this variable local to the function, so it doesn't
clutter the global object.

form = document.housingapplication;

var form = document.forms['housingapplication'];

for (i=0; i< form.Conditions.length; i++) {

for (i=0; i < form.elements.length; i++) {

if (form.Conditions.checked) {

if (form.elements.id.indexOf("Conditions")==0 &&
form.elements.checked)

total += parseInt(form.Conditions.value);

I recommend giving parseInt a second argument of 10. That enforces
the interpretation of the first argument as a base 10 numeral.
Since you wrote all the values yourself, it's probably not necessary,
but it's a good habit.

}
}
form.total.value = total;

form.elements['total'].value = total;

}
</script>

am not sure how to modify this so that it adds up all of the numbers, ie
Condition1 + Condition2 + Condition3 + Condition4....

See above. Use the id attribute to give them different ID's, use the
name attribute to group radiobuttons.

/L