how to use radio/checkbox to control text field or button

Hi,

Could someone tell me how to use radio/checkbox to control the display of
text field or button. For example, when click on radio, one text field related
to it will show up. I tried the following way, but the text field showed
in a new window, not next ot the radio.

....
<input type=radio name="first" onclick="addfield()">
<script LANGUAGE="JavaScript">
<!--
document.writeln("<b>Re-enter</b><input type=text name=\"pass\"><br>");
-->
</script>
....

Any help is appreciated!

Bao

Although I haven't tested the code below, it should be close. You'll have to
change the attribute values to match those in your document.

To hide/show the text field, use:
document.all("textfieldID").style.visibility="visible"; or
document.all("textfieldID").style.visibility="hidden"

To create the text field dynamically, set the innerHTML property of the
containing block tag so that it includes the text field definition. For
example, suppose you have an empty span where you want the text field to
appear: <span id="textfieldhere"></span>. Now you can create a text field
when the user clicks the radio button:
document.all("textfieldhere").innerHTML="<input type='text' id='textfieldID'
value='some value'></input>";

To remove the text field, set the innerHTML property to an empty string.

Russell Jones
Sr. Web Development Editor,
DevX.com


"bao" <bao@cc.usu.edu> wrote in message news:3b36b789$1@news.devx.com...
>
> Hi,
>
> Could someone tell me how to use radio/checkbox to control the display of
> text field or button. For example, when click on radio, one text field
related
> to it will show up. I tried the following way, but the text field showed
> in a new window, not next ot the radio.
>
> ...
> <input type=radio name="first" onclick="addfield()">
> <script LANGUAGE="JavaScript">
> <!--
> document.writeln("<b>Re-enter</b><input type=text name=\"pass\"><br>");
> -->
> </script>
> ...
>
> Any help is appreciated!
>
> Bao

Here is an actual tested example (using a combobox), just to iron out the
last details:

function showdate() {
var index = document.all.StoryCategory.selectedIndex

// the IF test below should test for True/False of your check/radio btn
if (document.all.StoryCategory.options(index).text == "Events" ) {
// If combobox text = 'Events' then show EventExpireDate InputBox
document.all.EventExpireDate.style.display = "";
document.all.EventExpireRow.style.display = "";
} else {
// combobox is not 'Event' so hide EventExpireDate
document.all.EventExpireDate.style.display = "none";
document.all.EventExpireRow.style.display = "none";
}
}


<!-- Use style="display:none" to start off hidden-->
<div id=EventExpireRow style="display:none">Event End Date</div>
<input id=EventExpireDate type="text" name="EventExpireDate" size="38" tabindex="3"
style="display:none">

<!-- Using the OnChange event will fire the script above -->
<select id=StoryCategory size="1" name="StoryCategory" tabindex="2" onchange="showdate();"><option>Each
Option Here</option></select>
------------------------
Should be only minor changes to use a radio button or checkbox to cause the
same actions. The dynamic creation idea presented by Mr. Jones below is
also very nice...

Scott Dowlen
Cofounder, President
Panacore Corporation



"Russell Jones" <arj1@northstate.net> wrote:
>Although I haven't tested the code below, it should be close. You'll have
to
>change the attribute values to match those in your document.
>
>To hide/show the text field, use:
>document.all("textfieldID").style.visibility="visible"; or
>document.all("textfieldID").style.visibility="hidden"
>
>To create the text field dynamically, set the innerHTML property of the
>containing block tag so that it includes the text field definition. For
>example, suppose you have an empty span where you want the text field to
>appear: <span id="textfieldhere"></span>. Now you can create a text field
>when the user clicks the radio button:
>document.all("textfieldhere").innerHTML="<input type='text' id='textfieldID'
>value='some value'></input>";
>
>To remove the text field, set the innerHTML property to an empty string.
>
>Russell Jones
>Sr. Web Development Editor,
>DevX.com
>
>
>"bao" <bao@cc.usu.edu> wrote in message news:3b36b789$1@news.devx.com...
>>
>> Hi,
>>
>> Could someone tell me how to use radio/checkbox to control the display
of
>> text field or button. For example, when click on radio, one text field
>related
>> to it will show up. I tried the following way, but the text field showed
>> in a new window, not next ot the radio.
>>
>> ...
>> <input type=radio name="first" onclick="addfield()">
>> <script LANGUAGE="JavaScript">
>> <!--
>> document.writeln("<b>Re-enter</b><input type=text name=\"pass\"><br>");
>> -->
>> </script>
>> ...
>>
>> Any help is appreciated!
>>
>> Bao
>
>