473,289 Members | 2,141 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Dynamic checkbox with Javascript

Hello,

Can someone tell me the script to use for having a change on the same page
when using checkbox function ?

For example, i would to check one condition and display dynamically a button
if the condition is checked on the same page.

Thanks in advance for your help

Steph
Jul 23 '05 #1
4 7250
In article <41***********************@news.free.fr>,
"Steph" <mc****@hotmail.com> wrote:
For example, i would to check one condition and display dynamically a button
if the condition is checked on the same page.


This may help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Radio buttons</title>

<script type="text/javascript">

function validate(x)
{
var checkedButton;

// Figure out which radio button was pressed

checkedButton = findValue(x.receiveVia);

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

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

// Validate email: name and email

if (checkedButton == "byEmail")
{

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")
{
// 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 vanishHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("hideSpan").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.hideSpan.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
function hideHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("vanishSpan").style.visibi lity = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.vanishSpan.style.visibility = doWhat;
}
else
{ alert("Cannot change display value 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.length;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</P>
<P>This form uses the CSS display
and visibility style attributes. When you click on the
radio button email, Javascript code uses the display attribute
property of hidden to exclude the address field from the display.
No space will be taken up in the window.
When you click on the no radio button, Javascript code uses the
visibility attribute property of none to make the literature
catagories invisible. Space will be taken up in the window.</p>

<form name="myForm"
action="http://www.notavalidurl.com"
method="GET"
onsubmit="return validate(document.forms['myForm']);">
<p>
<input type="radio"
name="receiveVia"
value="printed"
onclick="vanishHidden('');">
Printed brochure</p>
<p>
<input type="radio"
name="receiveVia"
value="byEmail"
onclick="vanishHidden('none');
document.forms['myForm'].theAddress.value = '';">
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><br>

<span id="hideSpan">
Postal address:<br>
<input type="text" name="theAddress" size="40">
</span>
</p>
<p>
Do you wish to receive additional literature?
<br>
<input type="radio"
name="literature"
value="yes"
onclick="hideHidden('visible')";>&nbsp;Yes&nbsp;&n bsp;
<!-- use visibility. -->
<span id="vanishSpan">
<input type="checkbox"
name="gardening"
valuegardening>&nbsp;Gardening
<input type="checkbox"
name="kitchen"
valuekitchen>&nbsp;Kitchen
<input type="checkbox"
name="vacation"
valuevacation>&nbsp;Vacation
<!-- Just get it done. I know there are better ways. -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;
<input type="checkbox"
name="office"
valueoffice>&nbsp;Office
<input type="checkbox"
name="secondhome"
valuesecondhome>&nbsp;Second Home
</span>

<br>
<input type="radio"
name="literature"
value="no"
onclick="hideHidden('hidden');
var d=document.forms['myForm'];
d.elements['gardening'].checked=false;
d.elements['kitchen'].checked=false;
d.elements['vacation'].checked=false;
d.elements['office'].checked=false;
d.elements['secondhome'].checked=false;">
No
</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)
{ vanishHidden('');}
else if (x.receiveVia[1].checked == true)
{ vanishHidden('none');}
else
{ ;}

if (x.literature[0].checked == true)
{ hideHidden('visible');}
else if (x.literature[1].checked == true)
{ hideHidden('hidden');}
else
{ ;}

</script>
</body>
</html>
Robert
Jul 23 '05 #2
Steph wrote:
[...]
For example, i would to check one condition and display dynamically a button
if the condition is checked on the same page.


The script below uses an onload function to fire the click when the
document loads. This is for two reasons:

1. If the user has javascript disabled or their browser does not
support it, the text box will still display and they can use it.
Otherwise, it will not be shown when the checkbox is checked.

2. You can set the checkbox to checked or not and the text input will
display/not display on opening the page without you having to change
the properties of the checkbox.

One note of caution: if the user puts something into the input then
unchecks the checkbox, the inupt is hidden but the text in it will
still be submitted. So maybe you want to disable it when it is not
displayed.

You can also use:

inp.style.visibility = 'visible' or 'hidden'

if you want the text box to still take up space on the page when
hidden.

Lastly, if the page is big, the onload will fire after all content is
loaded, so your text box may appear the disappear. To prevent that,
move the onload to a script immediately after the input so the body tag
becomes:

<body>

and put:

<script type="text/javascript">
clickIt('aForm','aCheckbox');
</script>

immediately after the text input. I think putting it in the body
onload is cleaner, but obviously having the input flash on then off may
be disconcerting for users.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Dynamic text box</title>
<script type="text/javascript">
function showHide(chk,inp){
if (chk.checked) {
inp.style.display = '';
} else {
inp.style.display = 'none';
}
}

function clickIt(frm,chk) {
var x = document.forms[frm].elements[chk];
if (x) x.click();
}
</script>
</head>
<body onload="clickIt('aForm','aCheckbox');">
<form action="" name="aForm">
<label for="aCheckbox">Click me&nbsp;<input type="checkbox"
name="aCheckbox" id="aCheckbox" onclick="
showHide(this,this.form.txtInput);
">
</label><br>
<input type="text" size="30" name="txtInput">
</form>
</body></html>
--
Rob
Jul 23 '05 #3
"RobG" <rg***@iinet.net.auau> a écrit dans le message de news:
as***************@news.optus.net.au...
Steph wrote:
[...]
For example, i would to check one condition and display dynamically a
button if the condition is checked on the same page.


The script below uses an onload function to fire the click when the
document loads. This is for two reasons:

1. If the user has javascript disabled or their browser does not
support it, the text box will still display and they can use it.
Otherwise, it will not be shown when the checkbox is checked.

2. You can set the checkbox to checked or not and the text input will
display/not display on opening the page without you having to change
the properties of the checkbox.

One note of caution: if the user puts something into the input then
unchecks the checkbox, the inupt is hidden but the text in it will
still be submitted. So maybe you want to disable it when it is not
displayed.

You can also use:

inp.style.visibility = 'visible' or 'hidden'

if you want the text box to still take up space on the page when
hidden.

Lastly, if the page is big, the onload will fire after all content is
loaded, so your text box may appear the disappear. To prevent that,
move the onload to a script immediately after the input so the body tag
becomes:

<body>

and put:

<script type="text/javascript">
clickIt('aForm','aCheckbox');
</script>

immediately after the text input. I think putting it in the body
onload is cleaner, but obviously having the input flash on then off may
be disconcerting for users.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Dynamic text box</title>
<script type="text/javascript">
function showHide(chk,inp){
if (chk.checked) {
inp.style.display = '';
} else {
inp.style.display = 'none';
}
}

function clickIt(frm,chk) {
var x = document.forms[frm].elements[chk];
if (x) x.click();
}
</script>
</head>
<body onload="clickIt('aForm','aCheckbox');">
<form action="" name="aForm">
<label for="aCheckbox">Click me&nbsp;<input type="checkbox"
name="aCheckbox" id="aCheckbox" onclick="
showHide(this,this.form.txtInput);
">
</label><br>
<input type="text" size="30" name="txtInput">
</form>
</body></html>
--
Rob


Thanks Rob,
I will test and let you know ...
Steph
Jul 23 '05 #4
"Robert" <rc*******@my-deja.com> a écrit dans le message de news:
rc*****************************@individual.net...
In article <41***********************@news.free.fr>,
"Steph" <mc****@hotmail.com> wrote:
For example, i would to check one condition and display dynamically a
button
if the condition is checked on the same page.


This may help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Radio buttons</title>

<script type="text/javascript">

function validate(x)
{
var checkedButton;

// Figure out which radio button was pressed

checkedButton = findValue(x.receiveVia);

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

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

// Validate email: name and email

if (checkedButton == "byEmail")
{

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")
{
// 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 vanishHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("hideSpan").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.hideSpan.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
function hideHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("vanishSpan").style.visibi lity = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.vanishSpan.style.visibility = doWhat;
}
else
{ alert("Cannot change display value 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.length;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</P>
<P>This form uses the CSS display
and visibility style attributes. When you click on the
radio button email, Javascript code uses the display attribute
property of hidden to exclude the address field from the display.
No space will be taken up in the window.
When you click on the no radio button, Javascript code uses the
visibility attribute property of none to make the literature
catagories invisible. Space will be taken up in the window.</p>

<form name="myForm"
action="http://www.notavalidurl.com"
method="GET"
onsubmit="return validate(document.forms['myForm']);">
<p>
<input type="radio"
name="receiveVia"
value="printed"
onclick="vanishHidden('');">
Printed brochure</p>
<p>
<input type="radio"
name="receiveVia"
value="byEmail"
onclick="vanishHidden('none');
document.forms['myForm'].theAddress.value = '';">
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><br>

<span id="hideSpan">
Postal address:<br>
<input type="text" name="theAddress" size="40">
</span>
</p>
<p>
Do you wish to receive additional literature?
<br>
<input type="radio"
name="literature"
value="yes"
onclick="hideHidden('visible')";>&nbsp;Yes&nbsp;&n bsp;
<!-- use visibility. -->
<span id="vanishSpan">
<input type="checkbox"
name="gardening"
valuegardening>&nbsp;Gardening
<input type="checkbox"
name="kitchen"
valuekitchen>&nbsp;Kitchen
<input type="checkbox"
name="vacation"
valuevacation>&nbsp;Vacation
<!-- Just get it done. I know there are better ways. -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;
<input type="checkbox"
name="office"
valueoffice>&nbsp;Office
<input type="checkbox"
name="secondhome"
valuesecondhome>&nbsp;Second Home
</span>

<br>
<input type="radio"
name="literature"
value="no"
onclick="hideHidden('hidden');
var d=document.forms['myForm'];
d.elements['gardening'].checked=false;
d.elements['kitchen'].checked=false;
d.elements['vacation'].checked=false;
d.elements['office'].checked=false;
d.elements['secondhome'].checked=false;">
No
</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)
{ vanishHidden('');}
else if (x.receiveVia[1].checked == true)
{ vanishHidden('none');}
else
{ ;}

if (x.literature[0].checked == true)
{ hideHidden('visible');}
else if (x.literature[1].checked == true)
{ hideHidden('hidden');}
else
{ ;}

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


Thanks again for your help !
Steph
Jul 23 '05 #5

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

Similar topics

4
by: pizzy | last post by:
INTRO: I tried to clean it up for easy reading. I hope I didn't make any mistakes. PROBLEM: WOW, this is some crazy sh!t. I can't get my checkbox (see "TAGSELECTED") to print my textboxes (see...
5
by: pizzy | last post by:
I am having a problem with the last results. I can't seem to be able to get the input2A and input3A to appear. I don't seem to have a problem with the show and hide after a number is entered and...
3
by: Leo J. Hart IV | last post by:
OK, here's another question for the experts: I am building a multi-step (3 steps actually) form using a panel for each step and hiding/displaying the appropriate panel/panels depending on which...
34
by: clinttoris | last post by:
Hello Experts, I have been told to post this in the Javascript forum as I want to do this client side just before my form gets submitted. Once the user clicks the submit button a javascript...
1
by: Satish.Talyan | last post by:
hi, i want to create a dynamic tree hierarchy in javascript.there are two parts in tree, group & user.when we click on group then users come under that's tree category will be opened.problem is...
1
by: wissenwill | last post by:
Hello! I need help to modify the following JavaScript: <script language="javascript"> var flds = "chk1,chk2,chk3,chk4".split(",") var vals = new Array(2,4,8,16) var msgs = new Array();
1
by: bumpy | last post by:
I wrote this pretty slick DHTML table that lets you add/remove rows and show/hide columns on the fly. It works perfectly in IE7, but it doesn't behave in Firefox 2.0.0.4. You can see it in action...
2
by: scottSD | last post by:
Hi everyone. this is my first post here, but i've found quite a bit of great information from reading the forums in the past. i'm not sure if what i'm trying to do is possible or not, but here it...
2
by: yomadhu | last post by:
I created a dynamic form in javascript. Am unable to get those values in to php to display. I need all details. If i add 10 rows the i need to display those all values. Can any one help me for that...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

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.