Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

adding values using radio buttion

Status
Not open for further replies.
Snug

Snug

MIS
Sep 5, 2001
59
US
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

 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Drainie
  • Locked
  • Question
Frontpage Has Stopped Working After Adding Google Maps Html
Replies
2
Views
89
Drainie
Drainie
achick
  • Locked
  • Question
How do we set up a FTP server using IIS
Replies
4
Views
122
SysAdmin05
SysAdmin05
aldago
  • Locked
  • Question
Problem using various browsers
Replies
0
Views
51
aldago
aldago
SD8146
  • Locked
  • Question
How to make a Form Field Mandatory using a Condition 1
Replies
2
Views
71
SylviaD
SylviaD
ACraib
  • Locked
  • Question
Radio Button as integer question 1
Replies
2
Views
54
ACraib
ACraib

Part and Inventory Search

Sponsor

Back
Top