mrduckers
asked on
onClick checkbox to show and hide a div area [DETECT IF CHECKED ON LOAD]
Using the code below i can click to check and show the hidden div and then uncheck to hide the div.
My question is that, how can i when loading the page check whether the check box is already checked when the page loads and show or hide the hidden div depending on this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
function comm_direct_change(checked
document.getElementById('d
}
</script>
<input type="checkbox" onclick="comm_direct_chang
<div style="display: none;" id="direct" class="result">
content
</div>
</BODY>
</HTML>
Regards, dt
My question is that, how can i when loading the page check whether the check box is already checked when the page loads and show or hide the hidden div depending on this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
function comm_direct_change(checked
document.getElementById('d
}
</script>
<input type="checkbox" onclick="comm_direct_chang
<div style="display: none;" id="direct" class="result">
content
</div>
</BODY>
</HTML>
Regards, dt
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
sorry to but in, but here is another example using radio buttons, but can be changed to use checkboxes very easy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
function render(c, t)
{
if (c.checked)
{
document.getElementById(t)
}
else
{
document.getElementById(t)
}
}
//-->
</script>
</head>
<body>
<form name="settings" method="post">
<p>
<input type="radio" value="US" name="countries" onClick="render(this, 'tblUS'); document.getElementById('t
<input type="radio" value="Canada" name="countries" onClick="render(this, 'tblCanada'); document.getElementById('t
<input type="radio" value="Other" name="countries" onClick="render(this, 'tblOther'); document.getElementById('t
</p>
<table id="tblUS" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select State<b></td>
<td width="25%"><input type="text" value="" name="State"></td>
</tr>
<tr>
<td width="25%">Zip Code</td>
<td width="25%"><input type="text" value="" name="zipcode"></td>
</tr>
</table>
<table id="tblCanada" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select Province<b></td>
<td width="25%"><input type="text" value="" name="Province"></td>
</tr>
<tr>
<td width="25%">Postal Code</td>
<td width="25%"><input type="text" value="" name="postalcode"></td>
</tr>
</table>
<table id="tblOther" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select Country<b></td>
<td width="25%"><input type="text" value="" name="country"></td>
</tr>
<tr>
<td width="25%">State</td>
<td width="25%"><input type="text" value="" name="state"></td>
</tr>
<tr>
<td width="25%">Province</td>
<td width="25%"><input type="text" value="" name="province"></td>
</tr>
<tr>
<td width="25%">Region</td>
<td width="25%"><input type="text" value="" name="region"></td>
</tr>
</table>
</form>
</body>
</html>
Ellandrd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
function render(c, t)
{
if (c.checked)
{
document.getElementById(t)
}
else
{
document.getElementById(t)
}
}
//-->
</script>
</head>
<body>
<form name="settings" method="post">
<p>
<input type="radio" value="US" name="countries" onClick="render(this, 'tblUS'); document.getElementById('t
<input type="radio" value="Canada" name="countries" onClick="render(this, 'tblCanada'); document.getElementById('t
<input type="radio" value="Other" name="countries" onClick="render(this, 'tblOther'); document.getElementById('t
</p>
<table id="tblUS" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select State<b></td>
<td width="25%"><input type="text" value="" name="State"></td>
</tr>
<tr>
<td width="25%">Zip Code</td>
<td width="25%"><input type="text" value="" name="zipcode"></td>
</tr>
</table>
<table id="tblCanada" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select Province<b></td>
<td width="25%"><input type="text" value="" name="Province"></td>
</tr>
<tr>
<td width="25%">Postal Code</td>
<td width="25%"><input type="text" value="" name="postalcode"></td>
</tr>
</table>
<table id="tblOther" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><b>Select Country<b></td>
<td width="25%"><input type="text" value="" name="country"></td>
</tr>
<tr>
<td width="25%">State</td>
<td width="25%"><input type="text" value="" name="state"></td>
</tr>
<tr>
<td width="25%">Province</td>
<td width="25%"><input type="text" value="" name="province"></td>
</tr>
<tr>
<td width="25%">Region</td>
<td width="25%"><input type="text" value="" name="region"></td>
</tr>
</table>
</form>
</body>
</html>
Ellandrd
<no points for me>
>> sometimes the onload event fires just too quickly before the other elements of the page are loaded so u can safely put ur function like this
archrajan, that sounds wrong, can you show an example of this behavior? For example, here's a sample using both your suggestion and an onload handler. Notice that the onload alert fires after the one embedded in script. Waiting until the entire page is loaded is exactly what a window.onload handler is supposed to do. But like I said, if I'm wrong, just show me an example, and I'll learn something new.
<html>
<head>
<script type="text/javascript">
window.onload = function() {alert("alert coming from onload event");};
</script>
</head>
<body>
<h4>Header</h4>
<p>Just some text, not important at all</p>
<script type="text/javascript">
alert("alert coming right before closing body tag");
</script>
</body>
</html>
>> sometimes the onload event fires just too quickly before the other elements of the page are loaded so u can safely put ur function like this
archrajan, that sounds wrong, can you show an example of this behavior? For example, here's a sample using both your suggestion and an onload handler. Notice that the onload alert fires after the one embedded in script. Waiting until the entire page is loaded is exactly what a window.onload handler is supposed to do. But like I said, if I'm wrong, just show me an example, and I'll learn something new.
<html>
<head>
<script type="text/javascript">
window.onload = function() {alert("alert coming from onload event");};
</script>
</head>
<body>
<h4>Header</h4>
<p>Just some text, not important at all</p>
<script type="text/javascript">
alert("alert coming right before closing body tag");
</script>
</body>
</html>
DAKYD
HERE IS THE EXAMPLE YOU REQUESTED, WITHOUT ACTUALLY UNDERGOING THAT KIND OF PROBLEM, I WILL NOT POST IT.
Take a look at this:
http://www.archanapatchirajan.com/defineview.html (with the scripts called onload event of body tag, look how the page looks.... the script is not working at alll)
http://www.archanapatchirajan.com/defineview1.html (with the scripts places just before the </body> tag the script works perfect and the page loads perfect)
NOTE: PLEASE CHECK THEM IN INTERNET EXPLORER
Also, ur example is so simple and its a static page, problems will not occur there, But remember we are not always using .html and static files, mine is a jsp file, but i have the view source in there u can check it out... u can also compare both the files, they are just the same with the difference of where the function is called!
LET ME KNOW IF U HAVE FURTHER DOUBTS
HERE IS THE EXAMPLE YOU REQUESTED, WITHOUT ACTUALLY UNDERGOING THAT KIND OF PROBLEM, I WILL NOT POST IT.
Take a look at this:
http://www.archanapatchirajan.com/defineview.html (with the scripts called onload event of body tag, look how the page looks.... the script is not working at alll)
http://www.archanapatchirajan.com/defineview1.html (with the scripts places just before the </body> tag the script works perfect and the page loads perfect)
NOTE: PLEASE CHECK THEM IN INTERNET EXPLORER
Also, ur example is so simple and its a static page, problems will not occur there, But remember we are not always using .html and static files, mine is a jsp file, but i have the view source in there u can check it out... u can also compare both the files, they are just the same with the difference of where the function is called!
LET ME KNOW IF U HAVE FURTHER DOUBTS
Pls post back once u see that link, i shud delete them from my website!
archrajan,
Calm down, no need to yell. I looked at both pages you posted, they look identical to me, and I don't get an error for either one. But, let's not pollute this thread, I've posted a Q in the Miscellaneous TA:
https://www.experts-exchange.com/questions/21396332/javascript-onload-timing.html
Calm down, no need to yell. I looked at both pages you posted, they look identical to me, and I don't get an error for either one. But, let's not pollute this thread, I've posted a Q in the Miscellaneous TA:
https://www.experts-exchange.com/questions/21396332/javascript-onload-timing.html
if u cannot differentiate between those 2 pages, then u definitely need a pair of glasses ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Q_21395578.html</ti
</head>
<body>
<input id="show" type="checkbox"><label for="show">Show</label>
<div id="direct">
content
</div>
<script type="text/javascript">
function commDirectToggle()
{
document.getElementById('d
}
document.getElementById('s
commDirectToggle();
</script>
</body>
</html>
<html lang="en">
<head>
<title>Q_21395578.html</ti
</head>
<body>
<input id="show" type="checkbox"><label for="show">Show</label>
<div id="direct">
content
</div>
<script type="text/javascript">
function commDirectToggle()
{
document.getElementById('d
}
document.getElementById('s
commDirectToggle();
</script>
</body>
</html>
ASKER
points to first working answer, thanks
be careful with the window.onload event,
if u have a body onload event also on ur page it will be over ridden
and also
sometimes the onload event fires just too quickly before the other elements of the page are loaded so u can safely put ur function like this
<script>
checkStatus();
</script>
and place this just before the closing body </body> tag to make sure the page is been loaded completely and all the elements are available for the script