add a textbox when radio button is clicked ?

Discussion in 'Javascript' started by Kulgan, Apr 3, 2007.

  1. Kulgan

    Kulgan Guest

    Hi all,

    Is it possible in javascript to add a textbox when the last of three
    radiobuttons is clicked ?

    thanks !
     
    Kulgan, Apr 3, 2007
    #1
    1. Advertisements

  2. Kulgan

    Kulgan Guest

    If the first or the second radiobutton is clicked the textbox must disapear
    again ...
    That would be a great solution, but how to do it ?

    thanks!
     
    Kulgan, Apr 4, 2007
    #2
    1. Advertisements

  3. Kulgan

    Tom Cole Guest

    You can start with this and fine tune as necessary:

    <script type="text/javascript">
    function checkIt(el) {
    if (el.value == "other") {
    document.getElementById('text').style.display = "block";
    }
    else {
    document.getElementById('text').style.display = "none";
    document.getElementById('who').value = '';
    }
    }
    </script>

    <input type="radio" name="radio" value="one"
    onclick="checkIt(this);">One
    <input type="radio" name="radio" value="two"
    onclick="checkIt(this);">Two
    <input type="radio" name="radio" value="other"
    onclick="checkIt(this);">Other <br>
    <div id="text" style="display:none;">Other: <input type="text"
    id="who"/></div>

    This puts the textfield in a hidden div. If one or two is checked, the
    textbox is hidden and it's value is reset (so you don't accidently
    submit a value, you could always change this behaviour as your server
    side should be checking the value of "radio" for "other" before it
    attempts to process a "who" value). If other is checked, the textfield
    is displayed.

    HTH.
     
    Tom Cole, Apr 4, 2007
    #3
  4. Kulgan

    -Lost Guest

    I think you put a little too much into that example. It is far more appropriate to use
    the native collections that exist via JavaScript. Hence my example:

    /* CSS */

    form input[name="text1"]
    {
    display: none;
    }

    /* SCRIPT */

    <script type="text/javascript">
    function checkIt(el) {
    if (el.value == "other") {
    document.forms['form1'].elements['text1'].style.display = "block";
    }
    else {
    document.forms['form1'].elements['text1'].style.display = "none";
    document.forms['form1'].elements['text1'].value = '';
    }
    }
    </script>

    /* MARKUP */

    <form name="form1">
    <input type="radio" name="radio" value="one" onclick="checkIt(this);">One
    <input type="radio" name="radio" value="two" onclick="checkIt(this);">Two
    <input type="radio" name="radio" value="other" onclick="checkIt(this);">Other<br>
    <input type="text" name="text1" />
    </form>

    Basically all I did was replace your getElementByIds with the form collection.

    Also, Internet Explorer may not like my use of attribute selectors. That can be solved by
    using a class or inline style.

    -Lost
     
    -Lost, Apr 5, 2007
    #4
  5. Kulgan

    Kulgan Guest

    Hi all,

    Thanks for your answers !

    I found an easy way to do this:

    Here's the script that I used:
    #######################################################
    <script type="text/javascript">
    function Show( elemID )
    {
    var elem = document.getElementById( elemID );

    elem.style.position = 'relative';
    elem.style.left = '0px';
    }

    function Hide( elemID )
    {
    var elem = document.getElementById( elemID );

    elem.style.position = 'absolute';
    elem.style.left = '-4000px';
    }
    ##########################################################

    In combination with this html / css it's working fine :
    ##########################################################
    <tr class="even-row" align="center" id="Q2T8">
    <td><input type="radio" name="Q2_A_8" value="1" id="Q2_A_8_1"
    onclick="Hide('extraQ')"/></td>
    <td><input type="radio" name="Q2_A_8" value="2" id="Q2_A_8_2"
    onclick="Hide('extraQ')"/></td>
    <td><input type="radio" name="Q2_A_8" value="3" id="Q2_A_8_3"
    onclick="Show('extraQ')"/></td>
    <td><input type="radio" name="Q2_A_8" value="4" id="Q2_A_8_4"
    onclick="Show('extraQ')"/></td>
    </tr>

    <tr id="extraQ" class="extraquestion">
    <td colspan="5">
    <br><b>Here's the textbox !</b><br>Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Praesent venenatis mollis leo. Aliquam eget
    justo. Mauris quis tellus in urna imperdiet convallis. Quisque vel dolor et
    risus dictum consequat. Nullam porttitor pretium elit.
    <textarea name="Q10" rows="3" cols="75" wrap="virtual"></textarea><br><br>
    <td>
    </tr>
    #########################################################

    thanks !
     
    Kulgan, Apr 5, 2007
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.