How do I get a text field to appear if radio box is checked?

Posted on 2012-08-27
Last Modified: 2013-11-19
Have two radio boxes in a form, like this:

O Car  O Other

If radio button "Other" is checked I'd like a text box to appear:
O Car  O Other |______________|

Please, could you experts help me with a code to achieve this.
Question by:lericson

    Expert Comment

    If you're using jQuery the following code can easily be used:

    $('input[name="inputname"]').click(function() {
    //Toggle the field

    Open in new window

    Make sure you change inputname to the name of your checkbox and then classoftextfield to the class of the text field or alternatively you can use # instead of . to use an id for the textfield. Are you using strict JavaScript however? As a solution for this would be different..

    Author Comment

    Thanks for your response. I am not sure how to handle your instructions. I need more help. This is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type='text/javascript' src='jquery.js'></script>

    $('input[name="Vintermetod"]').click(function() {

    //Toggle the field


      <!-- START -->
      <TABLE width="700" border="0" cellpadding="0" cellspacing="0">
      <FORM ACTION="batplatsansokan_1a.php" METHOD="POST">
            <TD width="226" align="left" valign="top">&nbsp;</TD>
            <TD width="425" colspan="2">&nbsp;</TD>
            <TD align="left" valign="top"><strong>Vinterf&ouml;rvaring:</strong></TD>
            <TD colspan="2">&nbsp;</TD>
          <TD align="left" valign="top">Min b&aring;t torr/sj&ouml;s&auml;tts normalt med: </TD>
          <TD colspan="2">
    <input type="radio" name="Vintermetod" id="Vintermetod" value="Gaffeltruck" />&nbsp;Gaffeltruck&nbsp;&nbsp;
    <input type="radio" name="Vintermetod" id="Vintermetod" value="Trailerramp"  />&nbsp;Trailerramp (jag har trailer)&nbsp;&nbsp;
    <input type="radio" name="Vintermetod"  id="Vintermetod" value="Annat" />&nbsp;Annat: <input type="text" name="Vinter_annat" id="Vinter_annat" class="classoftextfield" size="12" /></TD>
            <TD align="left" valign="top">&nbsp;</TD>
            <TD colspan="2">&nbsp;</TD>

    Could you please help.
    LVL 31

    Accepted Solution

    This toggles the visibility of the text box:-

      <input type="radio" name="r1" onclick="document.getElementById('box').style.display='none'">Car
      <input type="radio" name="r1" onclick="document.getElementById('box').style.display='block'">Other
      <input type="text" style="display:none" id="box">

    Open in new window


    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Live - One-on-One JavaScript Help from Top Experts

    Solve your toughest problems, fast.
    JavaScript experts are online now and ready to help you.

    Suggested Solutions

    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn how to dynamically set the form action using jQuery.

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now