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

Discussion in 'Javascript' started by James Greig, Nov 22, 2003.

  1. James Greig

    James Greig Guest

    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.
    James Greig, Nov 22, 2003
    #1
    1. Advertising

  2. 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
    >> 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.


    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.

    --
    Michael Winter
    d (remove ".invalid" to reply)
    Michael Winter, Nov 22, 2003
    #2
    1. Advertising

  3. (James Greig) writes:

    > 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.


    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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Nov 22, 2003
    #3
  4. James Greig

    james greig Guest

    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?


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    james greig, Nov 22, 2003
    #4
  5. james greig <> writes:

    > 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.
    <script type="text/javascript">

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Nov 22, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. IanH

    Running Total in Array

    IanH, Mar 8, 2006, in forum: Java
    Replies:
    1
    Views:
    1,070
    Rhino
    Mar 8, 2006
  2. CSharpGuy

    running total of lines

    CSharpGuy, Jun 13, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    353
    CSharpGuy
    Jun 13, 2006
  3. tshad

    Running total for GridView.

    tshad, Dec 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    683
    tshad
    Dec 18, 2007
  4. pizzy
    Replies:
    7
    Views:
    154
    pizzy
    Mar 23, 2005
  5. Replies:
    9
    Views:
    244
    Randy Webb
    Oct 15, 2005
Loading...

Share This Page