Multiple Functions in onLoad in Mozilla

D

Disco-181

Hi,

I have a script which isn't working in Mozilla based browser for some
reason. I'm trying to run two functions from the body onload tag and
it simply isn't happening.

I have a cascading menu, where the primary dropdown selection
determines the contents of a second dropdown. This is triggered by a
function in the onchange tag of the primarys select tag. When
triggered like this, the function and drop downs work fine. When
returning to the page I query a database to maintain state of the
primary dropdown and use the onload to trigger the function used in
the onchange to repopulate the second dropdown. As I say this works
fine in IE etc but not Mozilla based browsers.

Here's the code snippets. Anyone got any ideas?

In the header:


<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
}
</script>
<script language="JavaScript">
function selectInterests(frm)
{
// Obtain the first dimension position of the currently selected
var i = frm.adv_category.selectedIndex;
var n = frm.adv_interests.selectedIndex;
if (i > 0){
// Inititalise the new adv_interests selection
frm.adv_interests.options.length = arrValInterests.length
- 1;
// Now select the the items associated with the selected
option
for (var j=1; j < arrValInterests.length; j++){
frm.adv_interests.options[j-1].text =
arrTextInterests[j];
frm.adv_interests.options[j-1].value =
arrValInterests[j];
}
frm.adv_interests.options[0].selected = true;
}
else{
// User has reselected the blank 'adv_interests' option
frm.adv_interests.options.length = 1;
frm.adv_interests.options[0].text ="--Please Select--
";
frm.adv_interests.options[0].value = "";
}
}
</script>

</head>
<body bgcolor="#FFFFFF" onLoad="doOnload();" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

In the body:

<SELECT NAME="adv_category"
ID="adv_category"onChange="selectInterests(form1);">
<option value="0">--Please Select--</option>
<option value="3">Banknotes</option>
<option value="5" selected>Books</option>
<option value="1">Coins</option>
<option value="4">Medals</option>
<option value="6">Numismatic Circular</option>
</SELECT>

<SELECT multiple size="10" NAME="adv_interests" ID="adv_interests"
style="width:350px;">
<option value="">--Please Select--</option>
</SELECT>
<script language="JavaScript">
var arrValInterests = new Array();
var arrTextInterests = new Array();
arrValInterests[0] = new Array("0","0");
arrTextInterests[0] = new Array("0","--All Categories--");
arrValInterests[1] = new
Array("3","0","752","...removed...","724","653","654");
arrTextInterests[1] = new Array("3","--All
Categories--","Abyssinia","Afghanistan","...removed...","USA","Venezuela","Vietnam","West
Indies","Yemen","Yugoslavia","Zanzibar");
arrValInterests[2] = new Array("5","0","661","...removed...","662");
arrTextInterests[2] = new Array("5","--All Categories--","British
Coins-All","...removed...","Sylloge of Coins of the British Isles");
arrValInterests[3] = new Array("1","...removed...","36");
arrTextInterests[3] = new Array("1","--All
Categories--","...removed...","Treasure","US Coins");
arrValInterests[4] = new Array("4","0","121","...removed...","384");
arrTextInterests[4] = new Array("4","--All Categories--","British
orders","...removed...","Single Campaign Medals");
arrValInterests[5] = new Array("6","0");
arrTextInterests[5] = new Array("6","--All Categories--");
</script>
<script language="JavaScript">
function selectInterests(frm)
{
// Obtain the first dimension position of the currently selected
var i = frm.adv_category.selectedIndex;
var n = frm.adv_interests.selectedIndex;
if (i > 0){
// Inititalise the new adv_interests selection
frm.adv_interests.options.length = arrValInterests.length - 1;
// Now select the the items associated with the selected option
for (var j=1; j < arrValInterests.length; j++){
frm.adv_interests.options[j-1].text = arrTextInterests[j];
frm.adv_interests.options[j-1].value = arrValInterests[j];
}
frm.adv_interests.options[0].selected = true;
}
else
{
// User has reselected the blank 'adv_interests' option
frm.adv_interests.options.length = 1;
frm.adv_interests.options[0].text ="--Please Select-- ";
frm.adv_interests.options[0].value = "";
}
} </script>
 
M

Mick White

Disco-181 said:
Hi,

I have a script which isn't working in Mozilla based browser for some
reason. I'm trying to run two functions from the body onload tag and
it simply isn't happening.
In the header:
<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
}
</script>
Click to expand...

form1 looks like an incomplete reference to me.

Mick
 
R

Richard Cornford

Disco-181 wrote:
... . As I say this works
fine in IE etc but not Mozilla based browsers.

Here's the code snippets. Anyone got any ideas?

In the header:


<script type="text/javascript">
function doOnload() {
selectInterests(form1)
preloadImages()
}
Click to expand...
<snip>

IE makes named forms into named properties of the global/window object
so that their names can be used as identifiers in code to refer to the
corresponding element. As a result the identifier - form1 - would refer
to a form with the name, or ID, "form1". Mozilla browsers do no such
thing and the identifier - form1 - will resolve as an undefined property
of the global object. So Mozilla will error in the opening lines of
the - selectInterests - function. (as the javascript console would have
revealed).

Cross-browser code would use the - document.forms - collection to
acquire a reference to the form element so it could be passed to the
function call:-

function doOnload() {
var frm;
if(
(document.forms) &&
(frm = document.forms['form1'])
){
selectInterests(frm);
}
preloadImages();
}
<SELECT NAME="adv_category"
ID="adv_category" onChange="selectInterests(form1);">
Click to expand...

Both Mozilla and IE provide a custom scope chain for the internally
generated function created from event handling attribute string values.
These custom scope chains are non-standard and not universally
implemented in browsers, and IE and Mozilla generate different chains,
but both will place the document on the scope chain of an event handling
function generated for a controls. As a result the unqualified
identifier - form1 - will be resolved as a property of the document that
refers to the containing form. However, the W3C HTML DOM specification
(and all older scriptable browsers) offers a - form - property of form
controls that refers to their containing form. As a result a standard
(and more widely supported/reliable) method of passing a reference to
the containing form from an event handling function on a contained form
control is to use - this.form -:-

onChange="selectInterests( this.form );"

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add Image and label dynamically inside the dropdown 2
Survey details won't go through using php, ajax, Mysql 0
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
Very Basic CC Validation Javascript 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Multi select options in a menu 1
Javascrip code wont run properly. 2
How do I get the if statement correct in the lines that has it in the program? 2

Members online

Total: 27 (members: 2, guests: 25)
Robots: 429

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top