ll wrote:
> I'm currently working on a form which consists of a show and hide
> javascript. The toggle works fine, although when I click on submit, I
> would like the page to reload with the toggle (show/hide) div in the
> same state it was before being submitted. E.G. If the div was
> visible, I'd like for it to be visible upon return.
> Here's the script I'm currently using - thanks for any help,
> Louis
>
> --------------------------------------------
>
> <script language="javascript" type="text/javascript">
language="javascript" is unnecessary, and deprecated since HTML 4.01,
1999-12-24 CE.
> function WM_toggle(id){
This is no constructor, by convention its identifier should not start with a
capital letter.
> if (document.all){
var o = document.all[id];
> if(document.all[id].style.display == 'none'){
if (o.style.display == 'none')
{
aso.
> document.all[id].style.display = '';
> } else {
> document.all[id].style.display = 'none';
> }
o.style.display = (o.style.display == 'none') ? '' : 'none';
> return false;
You should fix that indentation.
> } else if (document.getElementById){
This branch, representing the standards-compliant approach, should be the
first one. The document.all branch is only needed for compatibility with
IE 4 which is pretty much obsolete by now.
> if(document.getElementById(id).style.display == 'none'){
> document.getElementById(id).style.display = 'block';
An element does not need to be a block element in order to be displayed.
There is no good reason not to set the initial value by assigning the empty
string in this branch as well.
> } else {
> document.getElementById(id).style.display = 'none';
> }
It is very inefficient to call a method several times only to retrieve the
same reference as before.
var o = document.getElementById(id);
// see above
o.style.display = (o.style.display == 'none') ? '' : 'none';
> return false;
> }
> }
> </script>
Summarized:
function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}
function wm_toggle(id)
{
var o;
if (isMethod(document, "getElementById"))
{
o = document.getElementById(id);
}
else if (document.all)
{
o = document.all[id];
}
if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = (o.style.display == "none") ? "" : "none";
return false;
}
return true;
}
As for your question, since the following execution context does not retain
the properties of the preceding one, you will have to store the display
state of the respective elements in a way that it can be read by client-side
scripting later. One way to do that are cookies, but it might suffice to
modify the query part of the request made when submitting the form, and read
that query part afterwards. For example (quick hack):
<head>
...
<script type="text/javascript">
function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}
var getElemById = (function() {
if (isMethod(document, "getElementById"))
{
return function(id) {
return document.getElementById(id);
};
}
else if (document.all)
{
return function(id) {
return document.all[id];
};
}
else
{
return function() {
return null;
};
}
})();
function restoreDisplayState()
{
var state =
(document.URL.match(/[?&]displaystate=([^&#]+)/)
|| [0, null])[1];
if (state == 0)
{
var o = getElemById("bar");
if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = "none";
}
}
}
</script>
</head>
<body onload="restoreDisplayState()">
<div id="bar"> </div>
...
<form action="foo" method="post" onsubmit="return handleSubmit(this)">
<script type="text/javascript">
function getDisplayState(id)
{
var o = getElemById(id);
return (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined"
? (o.style.display == "none"
? 0
: 1)
: "");
}
function handleSubmit(f)
{
f.action += "?displaystate=" + getDisplayState("bar");
return true;
}
</script>
...
</form>
</body>
HTH
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Similar Threads
