Radiobuttons with values and how to calculate.

[EffeX1]

Hello,

 

Im am pretty new to the website building and especially with JavaScripting, so be please be gentle  .

At the moment, i am working with Dreamweaver CS4.

 

I am creating a formula about the 'ecological footprint' with several Radiobutton questions.

These questions need to have a certain value attached to each possible answer and then when i press 'submit' at the end these values have to be added up and display the score. But how to?

Example:

 

Question 1

How do you go to work:

 

* Walking/Bycicle              value: 0

* Train/bus                      value: 5

* Car                                value: 7

 

Question 2

How much do you travel by train/bus.

 

* Never                                    value: 0

* Few times a month              value: 2

* Few times a week                value: 5

* Daily                                    value: 10

 

*Submit*            = Calculate and display values. For instance, Question 1 i had value 5 and question 2 value 10. So pressing submit should then dispay '15'.

 

This is what i have so far, the questions and answers are in dutch.

Hoe ga jij naar school?</strong></p>
      <form id="form1" name="form1" method="post" action="">
        <p>
          <label>
<input name="question1" type="radio" id="question1_0" value="0" />
Lopend/Met de fiets</label>
          <br />
          <label>
            <input type="radio" name="question1" value="5" id="question1_1" />
            Met het openbaar vervoer</label>
          <br />
          <label>
            <input type="radio" name="question1" value="10" id="question1_2" />
            Met de auto</label>
          <br />
        </p>
    </form>      
    <p><strong>Hoe vaak reis je met het openbaar vervoer?</strong></p>
    <form id="form2" name="form2" method="post" action="">
      <p>
        <label>
          <input type="radio" name="question2" value="0" id="question2_0" />
          Nooit</label>
        <br />
        <label>
          <input type="radio" name="question2" value="2" id="question2_1" />
          Slechts een paar keer per maan</label>
        <br />
        <label>
          <input type="radio" name="question2" value="5" id="question2_2" />
          Wekelijks</label>
        <br />
        <label>
          <input type="radio" name="question2" value="10" id="question2_3" />
          Dagelijks</label>
        <br />
      </p>
      </form>    
    <form id="form3" name="form3" method="post" action="">
          <label>
            <input type="submit" name="Bekijk de uitslag!" id="Bekijk de uitslag!" value="Bekijk de uitslag!" />
          </label>
        

 

PS: I have a addon for Dreamweaver called ' Form calculator'  created by KaosWeaver but i don't really know how it works...

[Psycho]

I don't use dreamweaver, so I can't help you with any functionality implemented through that or even with how to implement your own code. But, I do have a solution.

 

Raio groups can be an odd imlpementation to understand. A radio "group" is a collection of radio buttons. The group itself does not have a value - each of the radio buttons have thier own values. So, you need to iterrate through all of the radio options to find which one is checked to get the selected value of the group. Another problem is that if there is only one button in the group it is not treated as a group. This is typically not an issue, but I try to build my code such that it will work in any situation.

 

Anyway, here is a function that takes all of the above into consideration and returns the selected value of a radio group (or returns false if none are selected)

 

function radioGroupValue(groupObj)
{
    //Check if there is only one option (i.e. not an array)
    if (!groupObj.length)
    {
        //Only one option in group
        return (groupObj.checked) ? groupObj.value : false;
    }

    //Multiple options, iterate through each option
    for (var i=0; i<groupObj.length; i++)
    {
        //Check if option is checked
        if (groupObj[i].checked)
        {
            //Return value of the checked radio button
            return groupObj[i].value;
        }
    }

    //No option was selected
    return false;
}

 

You need to pass an object reference to the function. So, here is an example of how you could add up all the selected options from multiple radio groups:

function calcTotal()
{
    var formElements = document.forms['formName'].elements;
    var total = 0;

    total += radioGroupValue(formElements['group1Name']);
    total += radioGroupValue(formElements['group2Name']);
    total += radioGroupValue(formElements['group3Name']);
    total += radioGroupValue(formElements['group4Name']);
  
    alert("The total is " + total);
    return;
}