×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

adding values using radio buttion

adding values using radio buttion

adding values using radio buttion

(OP)
I have created a form in frontpage03 that will give users the option to rate 6 things (i.e. 1-5 using radio buttons 1=poor, 5=Great).  Looks greats, but is there a way that I can add the total for the buttons if I give them values?

Thanks in advance, Snug

RE: adding values using radio buttion

(OP)
Here is my code... am I close???

</head>
<script language=JavaScript><!--
function calculate(what) {
    for (var i=1, answer=0; i<7;i++)
    answer += what.elements['group' + i].value - 0;
    what.answer.value = answer;
    }
//--></script>


<body>
<form>

<table border="0" width="306" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="206">&nbsp;</td>
<td width="20" align="center" valign="baseline">
1</td>
<td width="20" align="center" valign="baseline">
2</td>
<td width="20" align="center" valign="baseline">
3</td>
<td width="20" align="center" valign="baseline">
4</td>
<td width="20" align="center" valign="baseline">
5</td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px"><a>
Timeliness/Responsiveness</a>&nbsp;</td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group1" value="1" ></td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group1"  ></td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group1" ></td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group1" ></td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group1" ></td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Communication</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input type="radio" name="group2" value="1" ></p>
</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group2" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group2" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group2" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group2" ></td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Knowledge</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input type="radio" name="group3" ></p>
</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group3" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group3" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group3" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group3"></td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Professionalism</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input type="radio" name="group4" ></p>
</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group4" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group4" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group4" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group4" ></td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Follow Through</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input type="radio" name="group5" ></p>
</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group5" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group5" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group5" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group5" ></td>
</tr>
<tr>
<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Overall Customer Service</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input type="radio" name="group6" ></p>
</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group6" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group6" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group6" ></td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input type="radio" name="group6" ></td>
</tr>
<tr>
<td width="206">&nbsp;</td>
<td width="20" align="center" valign="baseline">
1</td>
<td width="20" align="center" valign="baseline">
2</td>
<td width="20" align="center" valign="baseline">
3</td>
<td width="20" align="center" valign="baseline">
4</td>
<td width="20" align="center" valign="baseline">
5</td>
</tr>
</table>
<p><input type=text name="answer" size="7" maxlength="10" ></p>
<p>&nbsp;
<input type="button" value="calculate" onClick="calculate(this.form)">
</p>
</form>            
</body>

RE: adding values using radio buttion

(OP)
Got it, but I would like to be able to group the check boxes together so you can only check one box on a line...

Here's the working code for getting the totals...

CODE

</head>
<script language="JavaScript">
function initialize() {
     Total = 0;
     totalprice.innerText = Total;
}
function checkoption(checkbox) {
     checknum = parseInt(checkbox.value); //Turn the value into a number
     if (checkbox.checked == true) {
          Total += checknum;
     } else {
          Total -= checknum;
     }
     totalprice.innerText = Total;
}
</script>


<body onload="initialize();">
<form>

            <table border="0" width="306" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="206">&nbsp;</td>
<td width="20" align="center" valign="baseline">1</td>
<td width="20" align="center" valign="baseline">2</td>
<td width="20" align="center" valign="baseline">3</td>
<td width="20" align="center" valign="baseline">4</td>
<td width="20" align="center" valign="baseline">5</td>
</tr>
<tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px"><a>Timeliness/Responsiveness</a>&nbsp;</td>
<td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group1" value="1" onclick="checkoption(this);"></td>
                    <td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group1" value="2" onclick="checkoption(this);"></td>
                    <td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group1" value="3" onclick="checkoption(this);"></td>
                    <td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group1" value="4" onclick="checkoption(this);"></td>
                    <td width="20" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group1" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Communication</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input  type="checkbox" name="group2" value="1" onclick="checkoption(this);"></p>
                    </td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group2" value="2" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group2" value="3" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group2" value="4" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group2" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Knowledge</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input  type="checkbox" name="group3" value="1" onclick="checkoption(this);"></p>
                    </td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group3"  value="2" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group3" value="3" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group3" value="4" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group3" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Professionalism</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input  type="checkbox" name="group4"  value="1" onclick="checkoption(this);"></p>
                    </td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group4"  value="2" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group4" value="3" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group4" value="4" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group4" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Follow Through</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input  type="checkbox" name="group5"  value="1" onclick="checkoption(this);"></p>
                    </td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group5"  value="2" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group5" value="3" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group5" value="4" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group5" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>


<td width="206" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">Overall Customer Service</td>
<td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<p class="MsoBodyText">
<input  type="checkbox" name="group6"  value="1" onclick="checkoption(this);" ></p>
                    </td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group6" value="2" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group6" value="3" onclick="checkoption(this);"></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group6" value="4" onclick="checkoption(this);" ></td>
                    <td width="20" align="justify" valign="bottom" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<input  type="checkbox" name="group6" value="5" onclick="checkoption(this);" ></td>
                </tr>
                <tr>
                    <td width="206">&nbsp;</td>
                    <td width="20" align="center" valign="baseline">1</td>
                    <td width="20" align="center" valign="baseline">2</td>
                    <td width="20" align="center" valign="baseline">3</td>
                    <td width="20" align="center" valign="baseline">4</td>
                    <td width="20" align="center" valign="baseline">5</td>
                </tr>
                </table>
            <p>&nbsp;Total: <span id="totalprice"></span></p>
</form>            
<p>
</body>

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close