Links that Depend on Radio Button Selection?

@NeedCoffeeStatMar 27.2009

I’m trying to create a webpage that has a few radio buttons and a link — but the link’s destination depends on which radio button you have selected.

Here’s a crude example I’m using:

[code=php] <form> <input type=”radio” name=”r1″ onClick=”window.bananas=’bananas.html'”>Bananas <BR> <input type=”radio” name=”r1″ onClick=”window.apples=’apples.html'”>Apples <BR> <input type=”radio” name=”r1″ onClick=”window.oranges=’oranges.html'”>Oranges <BR> </form>

<a href=”javascript:;” onClick=”if (window.apples) window.location.href=window.apples; return false”>Click here only if you selected apples.</a> [/code]

Ideally, the link will only take you to ‘apples.html’ if you selected the Apples radio button. Nothing should happen if you’ve selected the other two.

It seems to work fine…at first. But it turns out that if you select Apples at first, but then you switch to another fruit, and click on the link, it’ll still go to the ‘apples.html’ — despite the radio button being selected on something else.

Is there a better way to accomplish this?

Thanks for your help!

to post a comment

JavaScript

7 Comments(s) _↴

@ZeroKilledMar 27.2009 — #probably, this is what you want to accomplish. when you click on a radio you are setting a variable (technically a property in the window object). the problem is that you have different variable name. make them have the same name, example [B][COLOR="DeepSkyBlue"]window.fruit[/COLOR][/B]. checking each variable is useless, otherwise you would have to check also which option is selected along with each variable. as result, you will end with too much statement.

<i>
 </i>&lt;form&gt; 
 &lt;input type="radio" name="r1" onClick="window.[COLOR="DeepSkyBlue"]bananas[/COLOR]='bananas.html'"&gt;Bananas &lt;BR&gt; 
 &lt;input type="radio" name="r1" onClick="window.[COLOR="DeepSkyBlue"]apples[/COLOR]='apples.html'"&gt;Apples &lt;BR&gt; 
 &lt;input type="radio" name="r1" onClick="window.[COLOR="DeepSkyBlue"]oranges[/COLOR]='oranges.html'"&gt;Oranges &lt;BR&gt; 
 &lt;/form&gt; 
 
 &lt;a href="javascript:;" 
 onClick="if (window.[COLOR="DeepSkyBlue"]apples[/COLOR]) 
 window.location.href= window.[COLOR="DeepSkyBlue"]apples[/COLOR]; 
 return false"&gt;Click here only if you selected apples.&lt;/a&gt;

@NeedCoffeeStatauthorMar 28.2009 — #probably, this is what you want to accomplish. when you click on a radio you are setting a variable (technically a property in the window object). the problem is that you have different variable name. make them have the same name, example [B][COLOR="DeepSkyBlue"]window.fruit[/COLOR][/B]. checking each variable is useless, otherwise you would have to check also which option is selected along with each variable. as result, you will end with too much statement.
[/QUOTE]

Thanks for the response. Are you saying that I should try something like this...?

[CODE]<form> 
 <input type="radio" name="r1" onClick="window.fruit='bananas.html'">Bananas <BR> 
 <input type="radio" name="r1" onClick="window.fruit='apples.html'">Apples <BR> 
 <input type="radio" name="r1" onClick="window.fruit='oranges.html'">Oranges <BR> 
 </form> 
 
 <a href="javascript:;" 
 onClick="if (window.fruit) 
 window.location.href= window.fruit; 
 return false">Click here only if you selected apples.</a>[/CODE]

...because that just takes you to whatever radio button is selected. Ideally, that link should [i]only[/i] work if the Apples radio button is chosen.

I'm not very knowledgeable about Javascript, so I might've misunderstood. Any help on this would be greatly appreciated!

@ZeroKilledMar 28.2009 — #then i don't see the reason to set a variable. what you need is to check if the radio button is marked or not. if so, you will go to desired page:

<i>
 </i>&lt;a href="apples.html" 
 onClick="if(!document.getElementsByName('r1')[B][COLOR="DeepSkyBlue"][1][/COLOR][/B].checked))return false;"&gt;Click here only if you selected apples.&lt;/a&gt;

notice the blue/bold code. it refer to the 2nd element which in this case is apple radio.

@NeedCoffeeStatauthorMar 31.2009 — #Thanks for the reply. Is this how it should look...?

[CODE]
 <form> 
 <input type="radio" name="r1" onClick="window.bananas='bananas.html'">Bananas <BR> 
 <input type="radio" name="r1" onClick="window.apples='apples.html'">Apples <BR> 
 <input type="radio" name="r1" onClick="window.oranges='oranges.html'">Oranges <BR> 
 </form> 
 
 <a href="apples.html" 
 onClick="if(!document.getElementsByName('r1')[1].checked))return false;">Click here only if you selected apples.</a> [/CODE]

Because that doesn't seem to work, either. Sorry if I misunderstood -- I know very little about Javascript.

@ZeroKilledMar 31.2009 — #sorry, there is an extra parenthesis that isn't supposed to be there. remove the blue-bold parenthesis:

<i>
 </i>&lt;a href="apples.html" 
 onClick="if(!document.getElementsByName('r1')[1].checked)[b][COLOR="DeepSkyBlue"])[/COLOR][/b]return false;"&gt;Click here only if you selected apples.&lt;/a&gt;

here is a shorter version, basically the same script but without conditional [b]if[/b]:

<i>
 </i>&lt;a href="apples.html" 
 onClick="return document.getElementsByName('r1')[1].checked;"&gt;Click here only if you selected apples.&lt;/a&gt;

@NeedCoffeeStatauthorMar 31.2009 — #This works beautifully. Thanks so much for your help. You rock!

[Code]
 <form> 
 <input type="radio" name="r1">Bananas <BR> 
 <input type="radio" name="r1">Apples <BR> 
 <input type="radio" name="r1">Oranges <BR> 
 </form> 
 
 <a href="fruit.bananas.html" 
 onClick="return document.getElementsByName('r1')[0].checked;">Click here only if you selected bananas.</a>
 
 <BR><BR>
 
 <a href="fruit.apples.html" 
 onClick="return document.getElementsByName('r1')[1].checked;">Click here only if you selected apples.</a>
 
 <BR><BR>
 
 <a href="fruit.oranges.html" 
 onClick="return document.getElementsByName('r1')[2].checked;">Click here only if you selected oranges.</a>
 [/Code]

@key888Apr 17.2009 — #I'm trying to make a code that when you click on one of the radio buttons it changes just part of a path name. if that makes any sence.

<html>

<head>

<title>C6</title>

</head>

<body bgcolor="tan">

<script type="text/javascript">

function check(BackUp)

{

document.getElementById("value").value=BackUp;

}

</script>

<form>

<input type="radio" name="BackUp" onclick="check(this.value)" value="Last">Last

<input type="radio" name="BackUp" onclick="check(this.value)" value="Mon">Mon

<input type="radio" name="BackUp" onclick="check(this.value)" value="Tue">Tue

<input type="radio" name="BackUp" onclick="check(this.value)" value="Wed">Wed

<input type="radio" name="BackUp" onclick="check(this.value)" value="Thu">Thu

<input type="radio" name="BackUp" onclick="check(this.value)" value="Fri">Fri

<input type="radio" name="BackUp" onclick="check(this.value)" value="Sat">Sat

<input type="radio" name="BackUp" onclick="check(this.value)" value="Sun">Sun

<input type="text" id="value" size="20">

</form>

<%

dim fs,f,t(22),x,StrPath,StrPathMon,StrPathTue,StrPathWed,StrPathThu,StrPathFri,StrPathSat,StrPathSun

dim STXPower,normalRate,yawAngle,EHNetworkstat,STXDownlink,trickleRate,scaleFactor,WHNetworkstat,gwstxmode

dim UHFMode,yawBias,EHAIS,SADPosition,flarefeather,notes,gwstxchannel,WHAIS,TaperPoint,TricklePoint

dim numGeoCommands

dim mtime

If value="Last" then

StrPath="c:inetpubSATSC6"

'StrPath="H:ExternalWhiteboard BackupSatSATSC6"

elseIf value="Mon" then

StrPath="H:ExternalWhiteboard BackupMonSATSC6"

elseif value="Tue" then

StrPath="H:ExternalWhiteboard BackupTueSATSC6"

elseif value="Wed" then

StrPath="H:ExternalWhiteboard BackupWedSATSC6"

elseif value="Thu" then

StrPath="H:ExternalWhiteboard BackupThuSATSC6"

elseif value="Fri" then

StrPath="H:ExternalWhiteboard BackupFriSATSC6"

elseif value="Sat" then

StrPath="H:ExternalWhiteboard BackupSatSATSC6"

elseif value="Sun" then

StrPath="H:ExternalWhiteboard BackupSunSATSC6"

else

StrPath="c:inetpubSATSC6"

'StrPath="h:ExternalWhiteboard BackupSatSATSC6"

end if

'StrPath = ""c:inetpubSATSC6"

set fs=CreateObject("Scripting.FileSystemObject")

set t(0)=fs.OpenTextFile(StrPath & "STXPower.txt",1,true)

set t(1)=fs.OpenTextFile(StrPath & "normalRate.txt",1,true)

set t(2)=fs.OpenTextFile(StrPath & "yawAngle.txt",1,true)

set t(3)=fs.OpenTextFile(StrPath & "EHNetworkstat.txt",1,true)

set t(4)=fs.OpenTextFile(StrPath & "STXDownlink.txt",1,true)

set t(5)=fs.OpenTextFile(StrPath & "trickleRate.txt",1,true)

set t(6)=fs.OpenTextFile(StrPath & "scaleFactor.txt",1,true)

set t(7)=fs.OpenTextFile(StrPath & "WHNetworkstat.txt",1,true)

set t(8)=fs.OpenTextFile(StrPath & "gwstxmode.txt",1,true)

set t(9)=fs.OpenTextFile(StrPath & "UHFMode.txt",1,true)

set t(10)=fs.OpenTextFile(StrPath & "yawBias.txt",1,true)

set t(11)=fs.OpenTextFile(StrPath & "numGeoCommands.txt",1,true)

set t(12)=fs.OpenTextFile(StrPath & "SADPosition.txt",1,true)

set t(13)=fs.OpenTextFile(StrPath & "flarefeather.txt",1,true)

set t(14)=fs.OpenTextFile(StrPath & "notes.txt",1,true)

set t(15)=fs.OpenTextFile(StrPath & "mtime.txt",1,true)

set t(16)=fs.OpenTextFile(StrPath & "controller.txt",1,true)

set t(17)=fs.OpenTextFile(StrPath & "gwstxchannel.txt",1,true)

set t(18)=fs.OpenTextFile(StrPath & "EHAIS.txt",1,true)

set t(19)=fs.OpenTextFile(StrPath & "WHAIS.txt",1,true)

set t(20)=fs.OpenTextFile(StrPath & "TaperPoint.txt",1,true)

set t(21)=fs.OpenTextFile(StrPath & "TricklePoint.txt",1,true)

STXPower=t(0).ReadLine

t(0).close

normalRate=t(1).ReadLine

t(1).close

yawAngle=t(2).ReadLine

t(2).close

EHNetworkstat=t(3).ReadLine

t(3).close

STXDownlink=t(4).ReadLine

t(4).close

trickleRate=t(5).ReadLine

t(5).close

scaleFactor=t(6).ReadLine

t(6).close

WHNetworkstat=t(7).ReadLine

t(7).close

gwstxmode=t(8).ReadLine

t(8).close

UHFMode=t(9).ReadLine

t(9).close

yawBias=t(10).ReadLine

t(10).close

numGeoCommands=t(11).ReadLine

t(11).close

SADPosition=t(12).ReadLine

t(12).close

flarefeather=t(13).ReadLine

t(13).close

notes=t(14).ReadAll

t(14).close

mtime=t(15).ReadLine

t(15).close

controller=t(16).ReadLine

t(16).close

gwstxchannel=t(17).ReadLine

t(17).close

EHAIS=t(18).ReadLine

t(18).close

WHAIS=t(19).ReadLine

t(19).close

TaperPoint=t(20).ReadLine

t(20).close

TricklePoint=t(21).ReadLine

t(21).close

%>

Also in #JavaScript _↴

website search Adding Quanities & Grand Total execCommand when user clicks a cell doesn't execute at all

Success!

Help @NeedCoffeeStat spread the word by sharing this article on Twitter...

Tweet This

Links that Depend on Radio Button Selection?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Links that Depend on Radio Button Selection?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴