Click to See Complete Forum and Search --> : global variables not getting recognized on page onload
RosTN
04-27-2005, 12:11 AM
I have a page onload function that needs to read the values from a global variable, but unfortunately the formselements are undefined at page onload.
The page fails to execute the function due to var value being null/undefined.. What is the best way around that???
At page load, I get an error message pointing to the variable definition below saying the "forms.1.store_id is null or not an object".. If I move the assignment within the function setFocus(), then it is able to recognize the the value, but then I lose the global functionality of it, which I need to be able to refresh and refocus my page..
Please help..Ros
<Script>
var stored=document.forms[1].store_id.value;
function setFocus(){
...
}
....
</Script>
<body onload="setFocus()">
...
</body>
7stud
04-27-2005, 12:20 AM
Your page is parsed sequentially from the top down, so this is what happens:
Step 1:
var stored=document.forms[1].store_id.value;
The <body> tag has not been encountered yet, and therefore no html elements exist, so undefined is assigned to 'stored'.
Step 2:
function setFocus(){...}
js parses the function and continues.
Step3:
<body onload ="setFocus()">
js assigns the onload event handler to the body tag and begins loading the html.
Step4:
</body>
js finishes loading the html, and the onload event handler fires, which calls your function, and the function refers to a variable whose value is undefined.
(disclaimer: the parsing process doesn't actually happen quite like that, but as far as you are concerned that's accurate enough.)
7stud
04-27-2005, 12:33 AM
Steps to take to get your script to work:
1) Never put an onload event in the <body> tag.
2) Instead use:
window.onload=function()
{
};
and place that between some script tags in the <head>. Anything you want to happen onload, put the code between the braces. Specifically, you have to put any references to html elements in there. As you probably realize, that creates a problem: if you assign a value to 'stored' inside those braces, it won't be global, and if you put it outside the braces, it will be undefined--like it is now--because no html elements exist when the statement is executed.
There are two solutions to that problem:
1) You can declare the variable outside the function, and assign it inside the function:
var stored;
window.onload=function()
{
stored = .....;
};
2) Create a global variable from inside the function:
window.onload=function()
{
window["stored"] = ....;
};
RosTN
04-28-2005, 12:38 AM
Great explanation. I followed your suggestion and had my variable problem resolved, however, I am still unable to hold the value of stored variable for a refresh of the page. How can I tackle that problem?
I need to be able to refresh the page and refocus it. I assign the value of the focus field to a hidden input field on the form, then I submit the form. After submission, the value of stored is reset back to the default value of "".
Here is the code:
<head>
<script>
<!--
var stored;
window.onload=function()
{
stored=document.form[1].store_id.value;
setFocus();
};
function setFocus()
{
if(stored != "")
{
eval("document.forms[0]."+stored+".focus()");
}
else
{
document.forms[0].cname.focus();
}
}
function lastFocused(elmId)
{
document.frmrefresh.store_id.value = elmId;
}
</head>
<body>
...
<form ...
<SELECT NAME="office" id="office" onfocus="lastFocused(this.id);" onblur=frmrefresh.submit();'>
... </SELECT>
</form>
<form name="frmrefresh" method="post" action="...">
<input name="store_id" type="hidden" value="">
</form>
</body>