• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

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

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.
0
Lennart Ericson
Asked:
Lennart Ericson
  • 2
1 Solution
 
rockinawayCommented:
If you're using jQuery the following code can easily be used:

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

//Toggle the field
    $('.classoftextfield').toggle(this.checked);

});

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..
0
 
Lennart EricsonAmateurAuthor Commented:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='jquery.js'></script>
<title>Document</title>

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

//Toggle the field
    $('.classoftextfield').toggle(this.checked);

});
</script>
</head>

<body>
 
  <!-- START -->
  <TABLE width="700" border="0" cellpadding="0" cellspacing="0">
  <FORM ACTION="batplatsansokan_1a.php" METHOD="POST">
      <TR>
        <TD width="226" align="left" valign="top">&nbsp;</TD>
        <TD width="425" colspan="2">&nbsp;</TD>
        </TR>
      <TR>
        <TD align="left" valign="top"><strong>Vinterf&ouml;rvaring:</strong></TD>
        <TD colspan="2">&nbsp;</TD>
    </TR>
      <TR>
      <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>
</TR>
<TR>
        <TD align="left" valign="top">&nbsp;</TD>
        <TD colspan="2">&nbsp;</TD>
    </TR>
    </FORM>
</table>

</body>
</html>
Could you please help.
0
 
GwynforWebCommented:
This toggles the visibility of the text box:-

<form>
  <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">
</form>

Open in new window

0
 
Lennart EricsonAmateurAuthor Commented:
Thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now