By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,842 Members | 2,368 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,842 IT Pros & Developers. It's quick & easy.

Radio Buttons and Text Input

P: 2
Hi All,

Could any one tell me please if it is possible to make a radio button that shows a text input field only when it is checked?


Thank you
Sep 11 '06 #1
Share this Question
Share on Google+
3 Replies


Banfa
Expert Mod 5K+
P: 8,916
I believe so but you will have to hand code it, there is nothing with Javascript/HTML to do it automatically.

You should be able in implement an onclick handler for the radio button/radio button group, then when it changes state use Javascript to get the text box object and set it's css display style to none

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function RadioClick()
  4. {
  5.   var RadioButtonID = "???";
  6.   var TextBoxID = "???";
  7.   var rb;
  8.   var tb;
  9.  
  10.   rb = document.getElementById(RadioButtonID);
  11.   tb = document.getElementById(TextBoxID);
  12.  
  13.   if (rb && tb)
  14.   {
  15.     if (rb.checked)
  16.     {
  17.       tb.style.display = "inline";
  18.     }
  19.     else
  20.     {
  21.       tb.style.display = "none";
  22.     }
  23.   }
  24. }
  25. //-->
  26. </script>
  27.  
Sep 11 '06 #2

P: 2
Thank you,

You don't imagine how that was helpful :)
Sep 12 '06 #3

P: 6
Your post was very informative but what I don't understand is how you get an HTML section to change after a radio button is clicked. I currently have a bit of code which displays 2 radio buttons and performs different alerts when one or the other is clicked so the onClick event is working and the if statement is distinguishing between which radio button was clicked, but when I change the value ("displaycode") that document.write(displaycode) is printing nothing happens. Relevant parts of my code are shown below.

<script>
//variables declared and created up here
function changesearch(n)
{
var displaycode=menuchoice[n];
if (n==0)
{
alert('Catalog');

}
else if (n==1)
{
alert('Webpage');
}
endif
}
</script>


function StringArray (n)
{
this.length = n;
for (var i =1; i<=n; i++)
{
this[i] = ' '
}
}
menuchoice = new StringArray(3)
menuchoice[0]='testing'
menuchoice[1]='<a href="http://www.cnn.com">cnn</a>'
menuchoice[2]='testing some more'
i = 0;
var displaycode=menuchoice[i];

function changesearch(n)
{
var displaycode=menuchoice[n];
if (n==0)
{
alert('Catalog');

}
else if (n==1)
{
alert('Webpage');
}
endif
}


</script>
<p>
Search Library:<br />

<a onClick="changesearch(0);"><input type=radio name="seachchoice" value=0>Catalog</a>

<a onClick="changesearch(1);"><input type=radio name="seachchoice" value=1>Webpage</a>

<script language="JavaScript">
document.write(displaycode)
</script>
Sep 15 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.