473,543 Members | 2,448 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Display/Hide Fields using radio buttons

Hello,

I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

Thanks!!!
Jul 23 '05 #1
10 13422
You can do this with divs and showing and hiding the divs as required based
on the radios selected.
I do this all the time with stuff I do for work.

Stu

"DettCom" <sc***@dettcom. com> wrote in message
news:ca******** *************** ***@posting.goo gle.com...
Hello,

I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

Thanks!!!

Jul 23 '05 #2
In article <ca************ **************@ posting.google. com>,
sc***@dettcom.c om (DettCom) wrote:
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

This javascript should help. The validation is very simple and there
are a lot of alerts so you can follow what is happening.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..formStyle {position:relat ive;}
</style>

<script type="text/javascript">

function validate()
{

var x = document.forms["myForm"];
var checkedButton;

// Figure out which radio button was pressed
checkedButton = findValue(x.rec eiveVia);

var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

alert("checkedB utton = " + checkedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (checkedButton == "byEmail")
{
alert("verifyin g email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (checkedButton= ="printed")
{
alert("Verifyin g printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function showHidden(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("field 3").style.displ ay = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.fi eld3.style.disp lay = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}

// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null;

for (i=0;i<obj.leng th;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomai n.com"
method="POST"
onsubmit="alert ('submitting'); return validate();">
<p><input type="radio" name="receiveVi a" value="printed"
onclick="showHi dden('');">&nbs p;Printed
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail"
onclick="showHi dden('none');
document.forms['myForm'].theAddress.val ue = '';">&nbsp;Via
Email</p>
<p>Name:<br>
<input type="text" name="theName" size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getEl ementById || document.all)
{ document.write( "<div id='field3' class='formStyl e'>");}
</script>
Postal address:<br>
<input type="text" name="theAddres s" size="40">
<script type="text/javascript">
if (document.getEl ementById || document.all)
{ document.write( "</div>");}
</script>
</p>

<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden(''); }
else if (x.receiveVia[1].checked == true)
{ showHidden('non e');}
else
{ ;}

</script>
</body>
</html>
Jul 23 '05 #3
Stuart, thanks for the reply. However, that is what I have been trying
with checkboxes (assume it is the same in theory). Here is the simple
code that i have been experiencing with:

<input type="checkbox"
onclick="if(doc ument.all)del.s tyle.display='n one'"">
<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>

For the life of me.... I cannot figure it out.
"Stuart Palmer" <tr**********@y oucant.com> wrote in message news:<2s******* ******@uni-berlin.de>...
You can do this with divs and showing and hiding the divs as required based
on the radios selected.
I do this all the time with stuff I do for work.

Stu

"DettCom" <sc***@dettcom. com> wrote in message
news:ca******** *************** ***@posting.goo gle.com...
Hello,

I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

Thanks!!!

Jul 23 '05 #4
DettCom wrote on 29 sep 2004 in comp.lang.javas cript:
Stuart, thanks for the reply. However, that is what I have been trying
with checkboxes (assume it is the same in theory). Here is the simple
code that i have been experiencing with:

<input type="checkbox"
onclick="if(doc ument.all)del.s tyle.display='n one'"">
<div id ="del">
Your address <input type="text" name="address">
....the rest of the deleivery fields
</div>


<input type="checkbox" checked
onclick="getEle mentById('del') .style.display=
(this.checked)? '':'none'">
<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>

IE6 tested, cross browser suspected.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #5
Evertjan. wrote:

[snip]
<input type="checkbox" checked
onclick="getEle mentById('del') .style.display=
(this.checked)? '':'none'">
<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>

[snip]

You should also play with the element's visibility attribute
to see if that suits your purpose too. If you set
display='none', the element takes up zero space on the page
and all the other elements whose position on the page is
based on the one you just hid will move (maybe quite a lot).
Similarly in reverse when you display it, both of which
can be quite disconcerting for users.

Using the visibility attribute, the element still takes up
room on the page so when you hide/reveal it, nothing moves
(well, sometimes things move a little bit in some browsers...).

Lastly, make sure your page still works with JavaScript
turned off - sometimes things are hidden using an in-line
stylen or CSS then revealed using JS to modify the style.
Users with JS turned of can't get to see the hidden do-dad.

Cheers, Rob.
Jul 23 '05 #6
RobG wrote on 30 sep 2004 in comp.lang.javas cript:
Lastly, make sure your page still works with JavaScript
turned off - sometimes things are hidden using an in-line
stylen or CSS then revealed using JS to modify the style.
Users with JS turned of can't get to see the hidden do-dad.


I don't agree completely.

If users want to have their JS turned off,
one should have them recognize what they miss,
not accommodate them with a subquality page,
unless you really need them as customers.
<noscript>
You silly ass!<br>
Without javascript this page is not what it should be<br>
Better look elswhere or change your ways
</noscript>

or

<div id='scripted'>
You silly ass!<br>
Without javascript this page is not what it should be<br>
Better look elswhere or change your ways
</div>
<script>
document.getEle mentById('scrip ted').style.dis play='none'
</script>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #7
Robert, that works!!! I have another posting that basically needs to
do the same thing, but will use a single checkbox. Can you help???

Thanks!!!

Robert <rc*******@my-deja.com> wrote in message news:<rc******* *************** *******@news1.w est.earthlink.n et>...
In article <ca************ **************@ posting.google. com>,
sc***@dettcom.c om (DettCom) wrote:
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

This javascript should help. The validation is very simple and there
are a lot of alerts so you can follow what is happening.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
.formStyle {position:relat ive;}
</style>

<script type="text/javascript">

function validate()
{

var x = document.forms["myForm"];
var checkedButton;

// Figure out which radio button was pressed
checkedButton = findValue(x.rec eiveVia);

var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

alert("checkedB utton = " + checkedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (checkedButton == "byEmail")
{
alert("verifyin g email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (checkedButton= ="printed")
{
alert("Verifyin g printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function showHidden(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("field 3").style.displ ay = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.fi eld3.style.disp lay = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}

// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null;

for (i=0;i<obj.leng th;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomai n.com"
method="POST"
onsubmit="alert ('submitting'); return validate();">
<p><input type="radio" name="receiveVi a" value="printed"
onclick="showHi dden('');">&nbs p;Printed
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail"
onclick="showHi dden('none');
document.forms['myForm'].theAddress.val ue = '';">&nbsp;Via
Email</p>
<p>Name:<br>
<input type="text" name="theName" size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getEl ementById || document.all)
{ document.write( "<div id='field3' class='formStyl e'>");}
</script>
Postal address:<br>
<input type="text" name="theAddres s" size="40">
<script type="text/javascript">
if (document.getEl ementById || document.all)
{ document.write( "</div>");}
</script>
</p>

<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden(''); }
else if (x.receiveVia[1].checked == true)
{ showHidden('non e');}
else
{ ;}

</script>
</body>
</html>

Jul 23 '05 #8
On 30 Sep 2004 07:41:49 GMT, Evertjan. <ex************ **@interxnl.net >
wrote:
RobG wrote on 30 sep 2004 in comp.lang.javas cript:
Lastly, make sure your page still works with JavaScript
turned off - sometimes things are hidden using an in-line
stylen or CSS then revealed using JS to modify the style.
Users with JS turned of can't get to see the hidden do-dad.


I don't agree completely.

If users want to have their JS turned off,
one should have them recognize what they miss,
not accommodate them with a subquality page,
unless you really need them as customers.


And if they have no control over the settings? What good does that do?

A page is hardly substandard if it just shows a few more elements than one
that is scripted. It is functional, and that is what matters!

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #9
sc***@dettcom.c om (DettCom) wrote in message news:<ca******* *************** ****@posting.go ogle.com>...
Robert, that works!!! I have another posting that basically needs to
do the same thing, but will use a single checkbox. Can you help???


OK, the coding is vary similiar.

The code fragment accesses a true/false variable:
document.forms["myForm"].elements["receiveVia "].checked

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..formStyle {position:relat ive;}
</style>

<script type="text/javascript">

function validate()
{

var x = document.forms["myForm"];
var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

alert(
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if(x.elements["receiveVia "].checked)
{
alert("verifyin g email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else
{
alert("Verifyin g printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}

}

function showHidden(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("field 3").style.displ ay = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.fi eld3.style.disp lay = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}

function decideDisplay()
{
var x = document.forms["myForm"];
if (x.receiveVia.c hecked == true)
{ showHidden('non e');
document.forms['myForm'].theAddress.val ue = '';
}
else
{ showHidden(''); }
}

</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomai n.com"
method="POST"
onsubmit="alert ('submitting'); return validate();">
<p><input type="checkbox"
name="receiveVi a"
value=""
onclick="decide Display();">&nb sp;Via
email</p>
<p>Name:<br>
<input type="text" name="theName" size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getEl ementById || document.all)
{ document.write( "<div id='field3' class='formStyl e'>");}
</script>
Postal address:<br>
<input type="text" name="theAddres s" size="40">
<script type="text/javascript">
if (document.getEl ementById || document.all)
{ document.write( "</div>");}
</script>
</p>

<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
decideDisplay() ;
</script>
</body>
</html>
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
23858
by: Owen Funkhouser | last post by:
I have a form with three radio options. And I have three buttons: <input type="submit" name="mainform_action" value="Edit Data"> <input type="submit" name="mainform_action" value="View Data"> <input type="submit" name="mainform_action" value="Delete Data"> If the first radio button is selected, I only want all three buttons to be visible...
2
2699
by: Pat Scott | last post by:
I am looking for a general purpose javascript snippet that enables me to <div> or <span> HTML to make portions of the form be hidden and then appear. The form contains about 12 sections and some sections can contain subsections. When the user clicks on a checkbox, I want previously hidden text boxes, radio buttons, text, drop down menus, and...
9
2741
by: sergio | last post by:
Hi all, I have created the following script that will show/hide a menu based on checkboxes. It works fine in Opera but not on IE6! Does anybody knows a workaround this problem? Thanks for your response. Sergio ------------------------------------------------ <script language="JavaScript" type="text/javascript">
3
10238
by: shreddie | last post by:
Could anyone assist with the following problem? I'm using JavaScript to hide/show table rows depending on the option selected in radio buttons. The script works fine in IE but in Firefox the hidden rows take up page space even though their content is not visible. I have extracted the necessary code as shown below: ...
1
2571
by: PeeZee | last post by:
I am having some trouble getting this done. I am able to get the value to display on a seperate page but not on the same page in the same form. I would like to display to set value of the radio button into a text field. Also, would need to multiply and add values of radio buttons as the are selected into seperate text field and have a...
11
19181
by: C.W.Holeman II | last post by:
I what to hide an input element and the following text. I have the selector for the input working and just need to grab the text following it. CSS: form{ display:table; text-align:center; }
4
2738
by: padmapriya | last post by:
I need to create three radio buttons and when the radio button is clicked, the corresponding text fields such as 3 different address types should get activated. If i clicked the first radio button, the text field corresponding to that should be enabled and the other two address type fields should be disabled. This is working fine for the first...
2
1464
by: pilankooveetil | last post by:
Hello, I am not sure whether I have asked this before but I havent resolved his issue yet. any kind of quick help will be appreciated. Requirement: To get the value of a field from a table on the basis of three other fields (will be put in the combo boxes on the form) and display it back on the FORM textbox and radio buttons. Example:...
1
2552
by: stewdizzle | last post by:
I have a from with three radio buttons (same group) and three text boxes. The radio buttons give the user a choice of uploading one, two, or three images. Currently, I have the text boxes load as disabled and the radio button selection enables the needed text boxes. It works but... I don't want to see the text boxes unless they are needed...
0
7402
marktang
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...
0
7347
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...
0
7733
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7344
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...
0
7684
tracyyun
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...
0
5883
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
4890
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...
1
1814
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
963
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.