Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How do I program a radio button to open an "invisible" input field?

    Hello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding.

    I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again.

    If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off.

    Please help. Thanks

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Here you are:-

    Code:
    <form>
    New York <input type = "radio" name = "rad1" onclick = "showbox()">
    New Jersey <input type = "radio" name = "rad1"onclick = "showbox()">
    Other <input type = "radio" name = "rad1" onclick = "showbox()">
    <span id = "theBox" style="display:none">Enter name of another state <input type = "text" id = "otherState"</span>
    </form>
    
    <script type = "text/javascript">
    
    function showbox() {
    var r = document.forms[0].rad1;
    var len = r.length;
    for (var i =0; i<len; i++) {
    if (r[0].checked || r[1].checked) {
    document.getElementById("otherState").value = "";
    document.getElementById("theBox").style.display="none";
    }
    if (r[2].checked) {
    document.getElementById("theBox").style.display="";
    }
    }
    
    }
    
    </script>

    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    magikeys (08-24-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much. That code was exactly what I needed. Now I just need to learn how it works. Thanks again.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New Problem:

    Earlier, I asked about programming a radio button to display a hidden field. Thanks to PhilipM for the help.

    However, since then, I've been experimenting with the same concept, but using a drop-down menu instead of radio buttons. I used the code PhilipM provided me for the radios as a springboard and tried to rewrite it to be appropriate for the drop-down menu. Unfortunately, it doesn't work. I'm obviously missing something. The options in the drop-down would be "Choose one...", "MN," "WI," and "Other," where "Other" would initiate an additional input field for the user to enter his/her state in text.

    Here's the code I've come up with so far:
    Code:
    <form action="">
    <font color="red">*</font>State: 
    <select name="rad1"><option selected="selected" onselect="showbox()">Choose...</option>
    <option onselect="showbox()">MN</option>
    <option onselect="showbox()">WI</option>
    <option onselect="showbox()">Other</option></select>
    <span id = "theBox" style="display:none">state here:<input type = "text" id = "otherState"/></span>
    
    <script language="JavaScript"> 
    <!--hide 
    
    function showbox() {
    var r = document.forms[0].rad1;
    var len = r.length;
    for (var i =0; i<len; i++) {
    if (r[0].checked || r[1].checked || r[2].checked) {
    document.getElementById("otherState").value = "";
    document.getElementById("theBox").style.display="none";
    }
    if (r[3].checked) {
    document.getElementById("theBox").style.display="";
    }
    }
    
    }
    Thanks for any help.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Wow. Not even close.

    (1) language="javascript" is obsolete. Use type="text/javascript".
    (2) You don't need to "hide" javascript from browsers that don't support it. For one thing, your page won't work if the browser doesn't support javascript. But more importantly, the need to do that vanished with MSIE 3 in about 1998.
    (3) You can't use onselect in <option>s. Instead, use onchange in the <select>.
    (4) *IF* you give each of the <option>s a value=, then you can get the user-selected option using just the .value property of the <select>.
    (5) <option>s are *never* checked. They will show as selected if indeed they are selected, but see (4). No reason to check the individual options in any case.
    (6) If you only give an ID to a <form> field, then that field *CAN NOT BE SEEN* by any page/code that the <form> gets posted to (that is, it will be invisible to the page specified by the <page>'s action=).
    (7) If you pass any <form> field to a function (which I do below by passing this to the showbox() function), then you can reach the <form> for that field (and, presumably, the <form> for other fields) using the .form property of the field. From there, you can reach any field in the <form> using the name of the field.
    (8) It's not necessary, but it's usually good practice to put your <script>s in the <head> of the page.

    I think that will do it. If not, somebody else will tell me what I missed.

    Code:
    <html>
    <head>
    <script type="text/javascript"> 
    function showbox(select) 
    {
        select.form.otherState.value = ""; // reset the text box value
        document.getElementById("theBox").style.display =
            select.value == "Other" ? "inline" : "none";
    }
    </script>
    </head>
    <body>
    
    
    <form action="">
    <font color="red">*</font>State: 
    <select name="state" onchange="showbox(this)">
        <option value="" selected="selected">Choose...</option>
        <option value="MN">MN</option>
        <option value="WI">WI</option>
        <option value="Other">Other</option>
    </select>
    <span id="theBox" style="display:none">
        state here: <input type="text" name="otherState"/>
    </span>
    
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Philip's radio button code has a couple of goofs in it.

    I mentioned the mistake in using id="otherState" for the <form> field (assuming the <form> will be sent along to another page via the action=).

    The other goof is that there is no reason at all for the for loop, since he never actually uses the loop index and instead just tests the radio buttons by number.

    Philip could have coded it thus:
    Code:
    function showbox() {
        var r = document.forms[0].rad1;
        if (r[0].checked || r[1].checked) {
            document.forms[0].otherState.value = ""; // using name instead of id
            document.getElementById("theBox").style.display="none";
        }
        if (r[2].checked) {
            document.getElementById("theBox").style.display="";
        }
    }
    Or, perhaps more cautiously (in case you added other radio buttons, later) thus:
    Code:
    function showbox() {
        // if a radio button was clicked on, always change the otherState:
        document.forms[0].otherState.value = "";
        // and assume that it was *NOT* the "other" button...
        document.getElementById("theBox").style.display = "none";
    
        var r = document.forms[0].rad1;
        var len = r.length;
        for (var i =0; i<len; i++) {
            if (r[i].checked && r[i].value == "Other" ) {
                // only if the "Other" button was checked do we display theBox
                document.getElementById("theBox").style.display = "inline";
            }
       }
    }
    But that assumes that you give values to your radio buttons, which is a good idea if you want to be able to READ those values on the page your action= in the form submits the form to. Thus:
    Code:
    <form action="some PHP or ASP or JSP or whatever page" >
    New York   <input type="radio" name="rad1" value="NY" onclick="showbox()"/>
    New Jersey <input type="radio" name="rad1" value="NJ" onclick="showbox()"/>
    Other      <input type="radio" name="rad1" value="Other" onclick="showbox()"/>
    <span id = "theBox" style="display:none">
        Enter name of another state <input type = "text" name="otherState"/>
    </span>
    </form>
    And that will work no matter how many radio buttons you have.
    Last edited by Old Pedant; 08-25-2011 at 01:55 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    <option onselect="showbox()">MN</option>
    It appears you might need some help with event types.

    Also if you look up a particular element, like <select> or <option>, it will give a description of it along with its properties and the events it supports.
    Last edited by webdev1958; 08-25-2011 at 02:04 AM.

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    (8) It's not necessary, but it's usually good practice to put your <script>s in the <head> of the page.
    That, by many nowadays, is considered to be the "old way" of doing things. Best practice nowadays is to put your javascript just above the </body> tag

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    I know the reasoning behind both <head> positioning and pre-</body> positioning. I personally prefer functions in the <head>, but I'm not fanatic about it. And, in many of my own pages, indeed I put the code just before the </body>, though usually it's to avoid the need for window.onload.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    The main advantage, as I see it, to put the js above the closing body tag is that the user doesn't have to wait for all js to be loaded first (if it's in the <head>) before any of the page content in the <body> begins to appear.

    Though, if there is only a small amount of js then the user won't even notice the difference in time it takes the content to appear.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Yep. Agreed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes!!! You all are awesome. As a newbie to this stuff, it's all pretty daunting for me. Thanks so much for the help. I'm learning a ton.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •