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

6 New Member

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.dt d">
<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="Radiobutt onGroup1" value="Radio_bu tton1"> Radio_button1
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton2"> Radio_button2
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton3"> Radio_button3
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton4"> 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

Subscribe Reply

22768

pbmods

5,821

Recognized Expert Expert

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.getEle mentById, 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

briankind

New Member

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.



[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibili ty: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

Recognized Expert Contributor

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.



Expand|Select|Wrap|Line Numbers

<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>

Jun 27 '07 #4

silviasalsa

New Member

like this?

the function stay the same right?

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibili ty:hidden;">
Show Textbox1
<input type="Text" name="Textbox1" >

<div id2=id_textbox_ 2 style="visibili ty:hidden;">
Show Textbox2
<input type="Text" name="Textbox2" >
</div>
</td>
</tr>

</body>
</html>[/HTML]

Jun 27 '07 #5

briankind

New Member

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

Recognized Expert Contributor

Instead of

Expand|Select|Wrap|Line Numbers

 <div id=id_textbox_1 style="visibility:hidden;">

      Show Textbox1

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

      Show Textbox2

    <input type="Text" name="Textbox2">

      </div>

you would use

Expand|Select|Wrap|Line Numbers

 <div style="visibility:hidden;">

      Show Textbox1

      <input type="Text" name="Textbox1" id=id_textbox_1>

      Show Textbox2

    <input type="Text" name="Textbox2" id=id_textbox_2>

      </div>

You would have to change your functions accordingly in getElementById( "id_textbox_num ber").

Jun 27 '07 #7

briankind

New Member

?
still struggling
still struggling
still strugglingstill strugglingstill strugglingstill struggling

Jun 27 '07 #8

briankind

New Member

Like this
?

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

function hide2() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "hidden";
}

function show2() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1

<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2

</td>

<td>
<div style="visibili ty: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

silviasalsa

New Member

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="JavaS cript"></script>

</head>

<body>
<p>

<td style="width:20 0">
<input type="Radio" name="DGroup" value="Radiobut ton1" onclick="javasc ript:ReverseDis play('textbx1') " checked="checke d">Radio button 1

<input type="Radio" name="DGroup" value="Radiobut ton2" onclick=
"javascript:Rev erseDisplay('te xtbx2')" unchecked>Radio button 1
</td>
</p>
<p> </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

Similar topics

8862

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

3515

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 form, the subform returns the records based on the two criteria. The criteria used on the main form are values selected in two list boxes. When the...

Microsoft Access / VBA

2932

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: "'<%#((OnlineLearningEnvironment.MultipleChoiceChoice)Container.DataItem).choiceText%>' is not a valid identifier." So, my question is, what do I do? (Code follows) Thank you in...

ASP.NET

2010

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â€ GroupName=â€Voteâ€ runat=â€serverâ€ /> </asp:TableCell> and try to access that Radiobutton within the page_load I get a error telling it does not no what that...

ASP.NET

1039

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 Local: Wed, Feb 1 2006 4:23 pm Subject: How to Pre-Select a DataGrid Row Radiobutton ? Reply | Reply to Author | Forward | Print | Individual Message |...

ASP.NET

9416

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 2.0 in C# with a Master page and additional .aspx pages with .cs code-behind pages in Windows XP. In an .aspx page I have declared a control as...

ASP.NET

3375

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 to a pmw dialog with (apply and cancel options ) i.e. when I press enable btn dialog pops up and asks to confirm the my choice and if apply is...

Python

4013

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 are not bound, I select from the bottom set and add to the top set which works fine, but now i decide to remove an item from the top set. when i...

Visual Basic 4 / 5 / 6

6776

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 can’t get any where on. My databse mostly includes bits of code for different examples. I have one last thing to finish. I am trying to create a search form that will allow users to select criteria from...

Microsoft Access / VBA

7449

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7385

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7642

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7405

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7737

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

5316

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

4938

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3440

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

688

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General