DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

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

  1. #1
    bao Guest

    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

  2. #2
    Russell Jones Guest

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

    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




  3. #3
    Scott Dowlen Guest

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


    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

    >
    >



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center