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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

multiple radio button validation

Status
Not open for further replies.
micawber

micawber

Programmer
Dec 10, 2002
71
GB
Hi,
I have a form using radio buttons. I need to be able to set the form so that it only allows one selection from each column.
So, if one radio button is selected the previous is deselected.
Below is the working version of the form apart from the required validation on the radio buttons.
Any help would be brilliant!
Thanks.


// FORM.ASP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<script language="JavaScript" type="text/javascript" src="calculate.js"></script>
</head>
<body>
<form name="calc" method="get">
<div id="ValidationResult" style="visibility: hidden;">Result</div>
<!--<div id="ValidationResult">Result</div>-->
<p>&nbsp;</p>
<table width="608" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td width="45%" align="center"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="131" height="142" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="30" valign="top"><div align="center"><strong>column 1

</strong></div></td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center">
<input name="option1" type="radio" value="1">
&pound;10</div></td>
</tr>
<tr>
<td valign="top"><div align="center">
<input name="option2" type="radio" value="1">
&pound;20</div></td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center">
<input name="option3" type="radio" value="1">
&pound;30</div></td>
</tr>
<tr>
<td valign="top"><div align="center">
<input name="option4" type="radio" value="1">
&pound;40</div></td>
</tr>
</table></td>
<td valign="top"><table width="131" height="142" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="30" valign="top"><div align="center"><strong>column 2

</strong></div></td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center">
<input name="option5" type="radio" value="2">
Yes</div></td>
</tr>
<tr>
<td valign="top"><div align="center">
<input name="option6" type="radio" value="2">
No</div></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="55%" align="center"><p><strong>Annual:</strong>
<input name="annual" type="text">
</p>
<p><strong>Monthly:</strong>
<input name="monthly" type="text">
</p></td>
</tr>
</table>
<table width="439" border="0" cellpadding="3">
<tr>
<td width="421"><div align="right">
<input type="button" onClick="count()" value="Calculate">
<input type="reset" value="Reset">
</div></td>
</tr>
</table>
<p>&nbsp;</p>
<DIV></DIV>
</form>
</body>
</html>




// CHECKOPTIONS.ASP

<%
If Request.Querystring("option1") = "true" AND Request.Querystring("option5") = "true" Then
Response.Write("10")
End If
If Request.Querystring("option1") = "true" AND Request.Querystring("option6") = "true" Then
Response.Write("20")
End If
If Request.Querystring("option2") = "true" AND Request.Querystring("option5") = "true" Then
Response.Write("30")
End If
If Request.Querystring("option2") = "true" AND Request.Querystring("option6") = "true" Then
Response.Write("40")
End If
If Request.Querystring("option3") = "true" AND Request.Querystring("option5") = "true" Then
Response.Write("50")
End If
If Request.Querystring("option3") = "true" AND Request.Querystring("option6") = "true" Then
Response.Write("60")
End If
If Request.Querystring("option4") = "true" AND Request.Querystring("option5") = "true" Then
Response.Write("70")
End If
If Request.Querystring("option4") = "true" AND Request.Querystring("option6") = "true" Then
Response.Write("80")
End If
%>


// CALCULATE.JS

var strAgentString = navigator.userAgent.toLowerCase(); // The agent info from the browser

var strBrowser; // Full browser name
var strBrowserCode; // Brief browser code
var strBrowserVersion; // Browser version
var strOS; // Operating system
var strWorkString; // Work string

if (InAgentString('konqueror'))
{
strBrowser = "Konqueror";
strOS = "Linux";
}
else if (InAgentString('firefox')) {
strBrowser = "Firefox";
strBrowserCode = "FF";
}
else if (InAgentString('icab')) {
strBrowser = "iCab";
strBrowserCode = "IC";
}
else if (InAgentString('msie')) {
strBrowser = "Internet Explorer";
strBrowserCode = "IE";
}
else if (InAgentString('omniweb')) {
strBrowser = "OmniWeb";
strBrowserCode = "OW";
}
else if (InAgentString('opera')) {
strBrowser = "Opera";
strBrowserCode = "OP";
}
else if (InAgentString('safari')) {
strBrowser = "Safari";
strBrowserCode = "SA";
}
else if (InAgentString('webtv')) {
strBrowser = "WebTV";
strBrowser = "WT";
}
else if (!InAgentString('compatible'))
{
strBrowser = "Netscape Navigator";
strBrowserCode = "NN";
strBrowserVersion = strAgentString.charAt(8);
}
else
{
strBrowser = "An unknown browser";
strBrowserCode = "XX";
}

if (!strBrowserVersion) strBrowserVersion = strAgentString.charAt(intPos + strWorkString.length);

if (!strOS)
{
if (InAgentString('linux')) strOS = "Linux";
else if (InAgentString('x11')) strOS = "Unix";
else if (InAgentString('mac')) strOS = "Mac"
else if (InAgentString('win')) strOS = "Windows"
else strOS = "An unknown OS";
}

function InAgentString(string) {
intPos = strAgentString.indexOf(string) + 1;
strWorkString = string;
return intPos;
}

function GetXmlHttpObject() {
var xmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
xmlHttp=new XMLHttpRequest()
return xmlHttp
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.xmlHttp"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.xmlHttp"
}
try
{
xmlHttp=new ActiveXObject(strName)
return xmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
xmlHttp=new XMLHttpRequest()
return xmlHttp
}
}


function count() {

// Collect FORM fields
stroption1 = document.calc.option1.checked
stroption2 = document.calc.option2.checked
stroption3 = document.calc.option3.checked
stroption4 = document.calc.option4.checked
stroption5 = document.calc.option5.checked
stroption6 = document.calc.option6.checked

// Send/recv
var xmlHttp;

xmlHttp = GetXmlHttpObject();

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
annual("ValidationResult", xmlHttp.responseText);
monthly("ValidationResult", xmlHttp.responseText);
return xmlHttp.responseText;
}
}
var URL = "checkoptions.asp";
URL = URL + "?option1=" + stroption1;
URL = URL + "&option2=" + stroption2;
URL = URL + "&option3=" + stroption3;
URL = URL + "&option4=" + stroption4;
URL = URL + "&option5=" + stroption5;
URL = URL + "&option6=" + stroption6;

xmlHttp.open("GET",URL,true);
xmlHttp.send(null);

}

function annual(strDiv, strMessage) {
if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode ==

"OP" || strBrowserCode == "SA")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.annual.value=strMessage;
}
return true;
}


function monthly(strDiv, strMessage) {
if (document.calc.annual.value == "10") <!-- 100 Excluded -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="1000";
}
{
if (document.calc.annual.value == "20") <!-- 100 Included -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="2000";
}
{
if (document.calc.annual.value == "30") <!-- 200 Excluded -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="3000";
}
{
if (document.calc.annual.value == "40") <!-- 200 Included -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="4000";
}
{
if (document.calc.annual.value == "50") <!-- 300 Excluded -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="5000";
}
{
if (document.calc.annual.value == "60") <!-- 300 Included -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="6000";
}
{
if (document.calc.annual.value == "70") <!-- 400 Excluded -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="7000";
}
{
if (document.calc.annual.value == "80") <!-- 400 Included -->
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.monthly.value="8000";
}
return true;
}
}
}
}
}
}
}
}
 
Sort by date Sort by votes
I have a form using radio buttons. I need to be able to set the form so that it only allows one selection from each column.
So, if one radio button is selected the previous is deselected.
Click to expand...

This the is the default behavior of radio buttons. Your problem is that you have named them all something different. Give each radio button the same name and you will get the desired effect.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Yeah you are right this is the default behaviour.
But when I do name the radio buttons the same - the output does not work. Also their are two columns so this would not apply.
Does anyone know if there is a way around this?
Any help/advice would be fantastic!
Thanks!
 
Upvote 0 Downvote
But when I do name the radio buttons the same - the output does not work.
Click to expand...

I suggest trying to fix that problem then, instead of breaking the default behavior of the HTML elements.

Also their are two columns so this would not apply.
Click to expand...

What does this have to do with anything?

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
thanks kaht.
i have tried this naming the buttons the same but the output does not work.
because the output does work with the code above i just thought their might be a way around the validation, thats all.
thanks again.
anyone any idea to get both working?
thanks.
 
Upvote 0 Downvote
anyone know if validation on the buttons is feasible?
the form is working how i want it to.
can anyone point me in the right direction?
thanks!
 
Upvote 0 Downvote
You have some real screwy HTML comments embedded in your Javascriptin calculate.js. You have them commented out for HTML, but not Javascript, so I'd guess that your code is causing errors on those and blowing out.

You also have other minor errors that will produce results you're not looking for, but shouldn't cause serious errors.

You'd do well to learn how to use Javascript's switch statement to make your if...else if....else if statements a bit easier to read and maintain.

Lee

 
Upvote 0 Downvote
thanks trollacious!
i'm still learning.
i've taken out the <!-- --> comments, it hasn't changed anything.
the output of the form is working how i want it to, its just the validation.
is the validation on the buttons feasible?
thanks!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
161
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
547
berkshirea
berkshirea
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
550
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
170
xwb
xwb
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
172
mayamanako
mayamanako

Part and Inventory Search

Sponsor

Back
Top