Solved

Show a textbox when radio button is selected.

Posted on 2004-03-24
5
475 Views
Last Modified: 2012-08-13
I'm a total non-programmer, so please bear with me.  This is an easy score for you.

I can hack html to make flat pages, but interactivity eludes me so far.

Here's what I want to do:

I have a form, and within the form I have 2 radio buttons.

If radio button 1 is selected (as default) then a text box should not be visible.
if radio button 2 is selected, a text box should appear right next to the check box.

Here's the section of my ugly code so far:

 <tr>
   <td height="32" class="xl24" style="height: 100%; border-top-style: none; border-top-width: medium" width="100%">
      <font face="Verdana">How should we reach you?
            <input type="radio" name="ContactBy" value="Email" checked>Email&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="ContactBy" value="Phone" onclick="if (this.checked) {Trouble.hidephone.display='true'} else {Trouble.hidephone.display='false'}">Phone&nbsp;&nbsp;&nbsp;
     
     <script>
     <div name="hidephone" id="hidephone">
      #</font> <input type="text" name="Phone" size="20"><font face="Verdana" size="1"><font class="font5"></font></font>
            </div>
     </script>
 </td>
</tr>

0
Comment
Question by:nummagumma2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 7

Assisted Solution

by:gam3r_3xtr3m3
gam3r_3xtr3m3 earned 50 total points
ID: 10672488
<tr>
   <td height="32" class="xl24" style="height: 100%; border-top-style: none; border-top-width: medium" width="100%">
      <font face="Verdana">How should we reach you?
            <input type="radio" name="ContactBy" value="Email" onClick="document.getElementById('hidephone').style.display='none';" checked>Email&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="ContactBy" value="Phone" onClick="document.getElementById('hidephone').style.display='block';">Phone <div name="hidephone" id="hidephone" style="display: none;">&#160;&#160;&#160;#<input type="text" name="Phone" size="20"></div>
 </td>
</tr>
0
 
LVL 1

Author Comment

by:nummagumma2
ID: 10673079
Great!

This is functional, but the textbox appears on the next line instead of just to the right of the radiobox.

Can you tune that part of it?
0
 
LVL 25

Accepted Solution

by:
devic earned 50 total points
ID: 10673445
<table border=0 cellspacing=0 cellpadding=3>
<tr style=font-family:Verdana>
      <td height=32>How should we reach you?</td>
      <td><input type="radio" name="ContactBy" value="Email" onClick="document.getElementById('hidephone').style.display='none';" checked></td>
      <td>Email</td>
      <td><input type="radio" name="ContactBy" value="Phone" onClick="document.getElementById('hidephone').style.display='';"></td>
      <td>Phone</td>
      <td id="hidephone" style="display: none;">#<input type="text" name="Phone" size="20"></td>
</tr>
</table>
0
 
LVL 1

Author Comment

by:nummagumma2
ID: 10674470
I split the points, but I think you'll both find the amount to be fair.

The second answer worked exactly as I wanted.

Thanks guys.
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 10675139
glad to help. =p

gam3r
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add somewhat of a wildcard to your javascript 12 44
Boolean 13 50
Error just appeared 3 23
Change variable when you click + or - on another end 2 17
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 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