www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] Radio Button click to display text input field

  1. #1
    Join Date
    Dec 2002
    Posts
    20

    resolved [RESOLVED] Radio Button click to display text input field

    Does anyone have a working script that will allow a text input field to display for entry when a radio button is clicked on a form?
    Steve S

  2. #2
    Join Date
    Jan 2005
    Posts
    3,067
    You can use the checked attribute or the value of the radio button to show/hide the text box:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showText(obj)
    {
    if(obj.value=='Show')
    {
    document.getElementById('mytext').style.display='block';
    obj.value='Hide';
    }
    else
    {
    document.getElementById('mytext').style.display='none';
    obj.value='Show';
    }
    return;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="mytext">
    </form>
    <input type="radio" onclick="showText(this)" value="Show">Click here to hide/show the text box.
    </body>
    </html>

  3. #3
    Join Date
    Dec 2002
    Posts
    20
    I added the 2 other radio buttons for testing and was wondering why the buttons dont fill in when selected? ALso I would like the text input box to display below the radio buttons when the 2nd box (Click here to hide/show ) is clicked

    <html>
    <head>
    <script type="text/javascript">
    function showText(obj)
    {
    if(obj.value=='Show')
    {
    document.getElementById('mytext').style.display='block';
    obj.value='Hide';
    }
    else
    {
    document.getElementById('mytext').style.display='none';
    obj.value='Show';
    }
    return;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="mytext">
    </form>
    <input type="radio" value="test1">radio selection 1
    <input type="radio" onclick="showText(this)" value="Show">Click here to hide/show the text box.
    <input type="radio" value="Test2">radio selection 3
    </body>
    </html>
    Steve S

  4. #4
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by sps2045
    I added the 2 other radio buttons for testing and was wondering why the buttons dont fill in when selected?
    Radio buttons only appeared checked when you either set the checked value to checked, or when you put them in a group, meaning give all of them the same name:

    ALso I would like the text input box to display below the radio buttons when the 2nd box (Click here to hide/show ) is clicked
    Then simply move it below them.

    here is the code with both fixes:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showText(obj)
    {
    if(obj.value=='Show')
    {
    document.getElementById('mytext').style.display='block';
    obj.value='Hide';
    }
    else
    {
    document.getElementById('mytext').style.display='none';
    obj.value='Show';
    }
    return;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="radio" name="radio1" value="test1">radio selection 1
    <input type="radio" name="radio1" onclick="showText(this)" value="Show" checked>Click here to hide/show the text box.
    <input type="radio" name="radio1" value="Test2">radio selection 3
    <input type="text" id="mytext">
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Dec 2002
    Posts
    20
    Thanks Konithomimo,
    Looks good and I believe I can now incorporate that script into my form
    Steve S

  6. #6
    Join Date
    Dec 2002
    Posts
    20
    One last request. How would the code look to turn off the text box when clicking on a different radio button? Now it will only dissapear when you click the Click here to hide/show button
    Steve S

  7. #7
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by sps2045
    One last request. How would the code look to turn off the text box when clicking on a different radio button? Now it will only dissapear when you click the Click here to hide/show button
    Change the function to take in a number. That way you can change the display.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showText(num)
    {
    if(num==0)
    document.getElementById('mytext').style.display='block';
    
    else
    document.getElementById('mytext').style.display='none';
    
    return;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="radio" name="radio1" value="test1">radio selection 1
    <input type="radio" name="radio1" onclick="showText(0)" checked>Click here to show the text box.
    <input type="radio" name="radio1" onclick="showText(1)">Click here to hide the text box.
    <input type="radio" name="radio1" value="Test2">radio selection 3
    <input type="text" id="mytext">
    </form>
    </body>
    </html>

  8. #8
    Join Date
    Dec 2002
    Posts
    20
    Thanks Konithomimo,
    The javascript you wrote works perfect and I actually understand it now.
    Steve S

  9. #9
    Join Date
    Dec 2002
    Posts
    20
    Konithomimo, How can I turn off the <input type="text" id="mytext" > from displaying when the web page is loaded? Other than that it works grest


    <html>
    <head>
    <script type="text/javascript">
    function showText(num)
    {

    if(num==0)
    document.getElementById('mytext').style.display='block';

    else

    document.getElementById('mytext').style.display='none';

    return;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="radio" name="radio1" value="test1" onclick="showText(1)" checked>radio selection 1
    <input type="radio" name="radio1" value="test1" onclick="showText(0)" >radio selection 2
    <input type="radio" name="radio1" value="Test3" onclick="showText(1)">radio selection 3

    <input type="text" id="mytext" >
    </form>
    </body>
    </html>
    Steve S

  10. #10
    Join Date
    Jan 2005
    Posts
    3,067
    The JS method is to add:

    style="display:none" to the text object tag.

    The better method though is to use CSS . . . If it was me though I would just use the JS version . . . the majority of people have JS enabled anyway.

  11. #11
    Join Date
    Dec 2002
    Posts
    20
    Ok thanks
    Steve S

  12. #12
    Join Date
    Dec 2002
    Posts
    20

    auto tab to next input field on a form

    Does anyone know how to automatically advance the cursor to the next input field when the first input field is filled in on a form? Thefirst field has a character length of 2 characters then I would like the cursot to tab to the next field automatically.
    Steve S

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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



Recent Articles