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!

asp form multiple radio button validation 1

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 and another gets selected the previous is deselected. The output values do not work if I call the radio buttons the same name which would automatically deselect the previous selected.
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 am confused by this statement:
The output values do not work if I call the radio buttons the same name which would automatically deselect the previous selected.
Click to expand...

If a group of radio buttons is mutally exclusive then they should have the same name and then, if you need to manipulate them in client-side code, you can do that by their id property. The JavaScript forumn might be a better place for this question if it only involves client-side logic instead of ASP.
 
Upvote 0 Downvote
thanks sheco.

okay i post this in the javascript forum.

by the statement i just mean if all the radio buttons have the same name i.e:

'<input name="option3"....'

then when a user selects a button it automatically deselects the previously selected button. which is what i'm looking to do.

 
Upvote 0 Downvote
I guess I still don't quite understand. The first message had this:
I need to be able to set the form so that it only allows one selection from each column
Click to expand...
And the followup message had this:
i just mean if all the radio buttons have the same name [...] then when a user selects a button it automatically deselects the previously selected button. which is what i'm looking to do.
Click to expand...

So it already seems like you know exactly what you want to do: give all the radio buttons in Column A the same name, but a different name than all the radio buttons in Column B. See how I am confused?
 
Upvote 0 Downvote
Simply change the options to something like this:

<input name="optionCol1" type="radio" value="10">&pound;10
<input name="optionCol1" type="radio" value="20">&pound;20
<input name="optionCol1" type="radio" value="30">&pound;30
<input name="optionCol1" type="radio" value="40">&pound;40

<input name="optionCol2" type="radio" value="Y">Yes
<input name="optionCol2" type="radio" value="N">No
 
Upvote 0 Downvote
thanks guitarzan.
i have tried this previously but the output does not work.
with the code above the output does work.
any ideas?
thanks.
 
Upvote 0 Downvote
Well, you're not being very specific, but...

With the ASP request object, do something like:
If Request.Querystring("optionCol1") = "10" AND Request.Querystring("optionCol2") = "Y" Then

And with javascript, do something like:
document.calc.optionCol1.value
 
Upvote 0 Downvote
thanks guitarzan...
yeah that works okay when their is only two items collected from the form.
if their is more...i.e. 'optionCol3'...i just can't find a way to get it to work.
any ideas?
thanks.
 
Upvote 0 Downvote
Everything in the same group needs the same "Name" value. This allows only one radio in the group to be selected at one time. They all have the same name, but each has a distinct value that can be extracted later.

In the example I've helped you with so far, you have two groups; one called "optionCol1" with four currency amounts (10, 20, 30, 40) and one called "optionCol2", with two choices (yes and no). If you want to add another group, each radio button in the group needs the same "name", but different "values". For example:

<input name="optionCol1" type="radio" value="10">&pound;10
<input name="optionCol1" type="radio" value="20">&pound;20
<input name="optionCol1" type="radio" value="30">&pound;30
<input name="optionCol1" type="radio" value="40">&pound;40

<input name="optionCol2" type="radio" value="Y">Yes
<input name="optionCol2" type="radio" value="N">No

<input name="optionColSex" type="radio" value="Male">Male
<input name="optionColSex" type="radio" value="Female">Female

<input name="optionColEyeColor" type="radio" value="Blue">Blue
<input name="optionColEyeColor" type="radio" value="Brown">Brown
<input name="optionColEyeColor" type="radio" value="Hazel">Hazel
<input name="optionColEyeColor" type="radio" value="Other">Other

I can't help any further until you are more specific about exactly WHAT is not working.
 
Upvote 0 Downvote
thanks again guitarzan!
i'm now familiar with the concept of radio buttons.
the 'bit' that isn't working is i'm just unable to get an output(selection result) to the two text fields 'annual' and 'monthly'.
thanks.
 
Upvote 0 Downvote
...and you are trying to get these values using the ASP Request Object? Javascript?
 
Upvote 0 Downvote
yes trying to get these values using the ASP Request Object.
any ideas?
thanks.
 
Upvote 0 Downvote
Response.Write("annual = " & Request.Querystring("annual"))
Response.Write("monthly = " & Request.Querystring("monthly"))


However, you will need a Submit button (or similiar), as Sheco suggested in your other thread.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
write HTML code within ASP line
Replies
1
Views
278
xwb
xwb
leifoet
  • Locked
  • Question
How to send HTML emails with ASP classic?
Replies
0
Views
259
leifoet
leifoet
penguinspeaks
  • Locked
  • Question
Return to current location on page after asp processes.
Replies
2
Views
211
penguinspeaks
penguinspeaks
how2trainyourdragon
  • Locked
  • Question
Request.Server variables blank for classic ASP
Replies
12
Views
508
GriffMG
GriffMG
Swi
  • Locked
  • Question
JQUERY AJAX POST and how to receive data via Classic ASP
Replies
0
Views
294
Swi
Swi

Part and Inventory Search

Sponsor

Back
Top