Radio Buttons and Text Input

[Moon]

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

[Banfa]

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

<script type="text/javascript">
<!--
function RadioClick()
{
  var RadioButtonID = "???";
  var TextBoxID = "???";
  var rb;
  var tb;

  rb = document.getElementById(RadioButtonID);
  tb = document.getElementById(TextBoxID);

  if (rb && tb)
  {
    if (rb.checked)
    {
      tb.style.display = "inline";
    }
    else
    {
      tb.style.display = "none";
    }
  }
}
//-->
</script>

[Moon]

Thank you,

You don't imagine how that was helpful :)

[sluster]

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 ("displaycod e") 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=men uchoice[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">cn n</a>'
menuchoice[2]='testing some more'
i = 0;
var displaycode=men uchoice[i];

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

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


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

<a onClick="change search(0);"><in put type=radio name="seachchoi ce" value=0>Catalog </a>

<a onClick="change search(1);"><in put type=radio name="seachchoi ce" value=1>Webpage </a>

<script language="JavaS cript">
document.write( displaycode)
</script>