473,387 Members | 1,603 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > select a radiobutton and a correspinding text box will show/visible

Join Bytes to post your question to a community of 473,387 software developers and data experts.

select a radiobutton and a correspinding text box will show/visible

Hello
i have these radio buttons and i wish to have the corresponding textboxes to be visible when the radiobutton is selected.

any Help?
snippets.
thanks


thanks in adv
Bry


here is the html:

[HTML]<!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" />



</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button1"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1">
<br>
texbox 2:
<input type="text" name="texbox2">
<br>
texbox 3:
<input type="text" name="texbox3">
<br>
texbox 4:
<input type="text" name="texbox4">
</form>

</td>
</tr>

</body>
</html>[/HTML]
Jun 27 '07 #1
11 22748
pbmods
5,821 Expert 4TB
Heya, Bry. Welcome to TSDN!

You'll want to add an onclick handler for each radio button that hides all of the textboxes and shows only the textbox that corresponds to that radio button.

You may also have to manually set the checked property of each radio button, as setting an onclick handler for radio controls tends to disrupt normal event firing.

Hints:
  • To hide an element:
    Expand|Select|Wrap|Line Numbers
    1. document.getElementById('theIDOfTheElementThatYouWantToEdit').style.visibility = 'hidden';
  • To show an element:
    Expand|Select|Wrap|Line Numbers
    1. document.getElementById('theIDOfTheElementThatYouWantToEdit').style.visibility = 'visibile';

Note that in order to use document.getElementById, you also need to give your elements IDs in addition to names.

P.S.

The experts on this site are more than happy to help you with your problems but they cannot do your assignment/program for you. Attempt the assignment/program yourself first and post questions regarding any difficulties you have or about a particular function of the code that you don't know how to achieve.

Please read the Posting Guidelines and particularly the Coursework Posting Guidlines.

Then when you are ready post a new question in this thread.

MODERATOR
Jun 27 '07 #2
Thanks
so far i have this. it is not working how i wanted to be.

it is not showing corresponding text box per radio button.

instead it is just hiding both text box when the radio button2 is selected
and showing both textbox when the radio button1 is selected.

<!---------------------------here it is-------HELP THANKS--------------------->

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "visible";
}


</script>



</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:200">
<input type="Radio" name="RadiobuttonGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
<input type="Radio" name="RadiobuttonGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibility:hidden;">
Show Textbox1
<input type="Text" name="Textbox1">
Show Textbox2
<input type="Text" name="Textbox2">
</div>
</td>
</tr>

</body>
</html>[/HTML]
Jun 27 '07 #3
improvcornartist
303 Expert 100+
Thanks
so far i have this. it is not working how i wanted to be.

it is not showing corresponding text box per radio button.

instead it is just hiding both text box when the radio button2 is selected
and showing both textbox when the radio button1 is selected.

<!---------------------------here it is-------HELP THANKS--------------------->

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <script type="text/javascript">
  5. function hide() {
  6. var div_ref = document.getElementById("id_textbox_1");
  7.   div_ref.style.visibility = "hidden";
  8. }
  9.  
  10. function show() {
  11. var div_ref = document.getElementById("id_textbox_1");
  12.   div_ref.style.visibility = "visible";
  13. }
  14.  
  15.  
  16. </script>
  17.  
  18.  
  19.  
  20. </head>
  21.  
  22. <body>
  23. <tr>
  24. <td>
  25. Select radio button type <BR>
  26. </td>
  27. <td style="width:200">
  28. <input type="Radio" name="RadiobuttonGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
  29. <input type="Radio" name="RadiobuttonGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 2
  30. </td>
  31. <td>
  32.       <div id=id_textbox_1 style="visibility:hidden;">
  33.       Show Textbox1 
  34.       <input type="Text" name="Textbox1">
  35.       Show Textbox2
  36.       <input type="Text" name="Textbox2">
  37.       </div>
  38. </td>
  39. </tr> 
  40.  
  41. </body>
  42. </html>
You have specified the id 'id_textbox_1' for the div, which contains both textboxes. So, when you call show or hide, it shows or hides the div (both textboxes). You need to specify an id for each textbox that you will want to change the style of and use that id in your show and hide functions.
Jun 27 '07 #4
like this?

the function stay the same right?




[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "visible";
}

<script type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "visible";
}

</script>



</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:200">
<input type="Radio" name="RadiobuttonGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
<input type="Radio" name="RadiobuttonGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibility:hidden;">
Show Textbox1
<input type="Text" name="Textbox1">

<div id2=id_textbox_2 style="visibility:hidden;">
Show Textbox2
<input type="Text" name="Textbox2">
</div>
</td>
</tr>

</body>
</html>[/HTML]
Jun 27 '07 #5
You have specified the id 'id_textbox_1' for the div, which contains both textboxes.

So, when you call show or hide, it shows or hides the div (both textboxes).

You need to specify an id for each textbox that you will want to change the style of and use that id in your show and hide functions.

how and where do you specify an id for each textbox

and how where do you use that id in your show and hide functions?

thanks
Jun 27 '07 #6
improvcornartist
303 Expert 100+
Instead of

Expand|Select|Wrap|Line Numbers
  1. <div id=id_textbox_1 style="visibility:hidden;">
  2.       Show Textbox1
  3.       <input type="Text" name="Textbox1">
  4.       Show Textbox2
  5.     <input type="Text" name="Textbox2">
  6.       </div>
you would use

Expand|Select|Wrap|Line Numbers
  1. <div style="visibility:hidden;">
  2.       Show Textbox1
  3.       <input type="Text" name="Textbox1" id=id_textbox_1>
  4.       Show Textbox2
  5.     <input type="Text" name="Textbox2" id=id_textbox_2>
  6.       </div>
You would have to change your functions accordingly in getElementById("id_textbox_number").
Jun 27 '07 #7
?
still struggling
still struggling
still strugglingstill strugglingstill strugglingstill struggling
Jun 27 '07 #8
Like this
?

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.getElementById("id_textbox_1");
div_ref.style.visibility = "visible";
}

function hide2() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "hidden";
}

function show2() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "visible";
}


</script>



</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:200">
<input type="Radio" name="RadiobuttonGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1

<input type="Radio" name="RadiobuttonGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 2



</td>


<td>
<div style="visibility:hidden;">
Show Textbox1
<input type="Text" name="Textbox1" id=id_textbox_1>

or

Show Textbox2
<input type="Text" name="Textbox2" id=id_textbox_2>
</div>
</td>
</tr>

</body>
</html>[/HTML]
Jun 27 '07 #9
I guess it is working.
it is outputing out the text but as far as checkboxes can someon check.
dont know if it is outputing the same textbox1
thanks
Please check it
[HTML]<html>


<script type="text/javascript" language="JavaScript"><!--
function hide() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "visible";
}


function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none")
{
document.getElementById('textbx1').style.display = "none";
document.getElementById('textbx2').style.display = "none";
document.getElementById(d).style.display = "block";
}
else { document.getElementById(d).style.display = "none";
document.getElementById('textbx1').style.display = "none";
document.getElementById('textbx2').style.display = "none";
}
}
//--></script>


</head>

<body>
<p>


<td style="width:200">
<input type="Radio" name="DGroup" value="Radiobutton1" onclick="javascript:ReverseDisplay('textbx1')" checked="checked">Radio button 1

<input type="Radio" name="DGroup" value="Radiobutton2" onclick=
"javascript:ReverseDisplay('textbx2')" unchecked>Radio button 1
</td>
</p>
<p>&nbsp;</p>
<div id="textbx1" style="display:none;">
Fortextbx1

Show Textbox1
<input type="Text" name="textbx1">

</div>

<div id="textbx2" style="display:none;">
Fortext2
Show Textbox2
<input type="Text" name="textbx2">
</div>

</body>
</html>[/HTML]
Jun 27 '07 #10
acoder
16,027 Expert Mod 8TB
Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR.
Jun 28 '07 #11
Hello
i have these radio buttons and i wish to have the corresponding textboxes to be visible when the radiobutton is selected.

any Help?
snippets.
thanks


thanks in adv
Bry


here is the html:

[HTML]<!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" />



</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button1"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1">
<br>
texbox 2:
<input type="text" name="texbox2">
<br>
texbox 3:
<input type="text" name="texbox3">
<br>
texbox 4:
<input type="text" name="texbox4">
</form>

</td>
</tr>

</body>
</html>[/HTML]
Hi,
here I have created a sample html page as per you requirement please go through the code and if you have any probs revert to me.

regards,

Kishore M

[HTML]
<!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>
var gVar="";

function fun(self,taxname)
{

if(self.checked == true)
{
if(gVar != "")
{
document.getElementById(gVar).style.visibility='hi dden';
}
document.getElementById(taxname).style.visibility= 'visible';
gVar=taxname;
}

}
</script>
</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button1" onclick="fun(this,'texbox1')"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2" onclick="fun(this,'texbox2')"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3" onclick="fun(this,'texbox3')"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4" onclick="fun(this,'texbox4')"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1" id="texbox1" style="visibility:hidden">
<br>
texbox 2:
<input type="text" name="texbox2" id="texbox2" style="visibility:hidden">
<br>
texbox 3:
<input type="text" name="texbox3" id="texbox3" style="visibility:hidden">
<br>
texbox 4:
<input type="text" name="texbox4" id="texbox4" style="visibility:hidden">
</form>

</td>
</tr>

</body>
</html>

[/HTML]
Jun 28 '07 #12

Sign in to post your reply or Sign up for a free account.

Similar topics

12
Multiple select onclick disable another form field
by: Forti2ude | last post by:
Hello, I have a simple form... <form> <select name="foo" multiple> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>
Javascript
19
Code for Filtering from Mult-select List Box Criteria
by: William Wisnieski | last post by:
Hello Everyone, I have a main form with a datasheet subform that I use to query by form. After the user selects two criteria on the main form and clicks the cmdShowResults button on the main...
Microsoft Access / VBA
2
Dynamic RadioButton IDs - help
by: Timothy V | last post by:
Hi, I have a RadioButton within a Repeater that i wish to assign an ID dynamically to the radiobutton. However, this won't allow me due to the following error:...
ASP.NET
5
radiobutton in visual studio
by: chrisfarscape | last post by:
I am having a problem getting my visual studio to recognize my option buttons within a table control. When I place <asp:TableCell> <asp:RadioButton id”test1” Text=”Test”...
ASP.NET
0
How to pre-select a control of a DataGrid ?
by: savvy | last post by:
savvy Feb 1, 4:23 pm show options Newsgroups: microsoft.public.dotnet.framework.aspnet From: "savvy" <johng...@gmail.com> - Find messages by this author Date: 1 Feb 2006 08:23:19 -0800...
ASP.NET
5
asp:RadioButton runat="server" - want to react to click event on client side
by: Barry | last post by:
I've wasted the whole day trying things and researching, but nothing is working. I would *greatly* appreciate if someone can give me the solution to this problem. I'm using the .NET Framework...
ASP.NET
4
How to link radio select with dialog in Tkinter
by: joseff | last post by:
Hi evryone!! I' m very new not only to Python and Tkinter but to programing. I'm a bit stuck here and would be grateful for some help. I have 3 radio select buttons(see below) which I want to link...
Python
1
Trying To Select A record Using The Listbox
by: Sunray | last post by:
I have a form called the sales form and i have 2 sets of listboxes So what happens is. i add items form the bottom set of list boxes which are bound to a data base to the top set of list boxes which...
Visual Basic 4 / 5 / 6
1
filter a subform based on multiple multi select list boxes
by: woodey2002 | last post by:
Hi Everyone and many thanks for your time.. I am trying to begin access and a bit of VBA i am enjoying it but I have a annoying problem I just cant get any where on. My databse mostly includes...
Microsoft Access / VBA
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!