multiple onload and onchange events plus...

**gwmbox** · 01-09-2011, 04:51 AM

Hi all, just a few questions to help me out please

Q1.
Is it possible to have an onload event work outside of the body tag. I.e. have it load when a div is loaded?

Or can I have more than one onload event within a body tag?

Code:

<body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs')">

<body onload="initListGroup('houses', document.forms[1].make, document.forms[1].type, document.forms[1].model, 'cs')">

Q2.
Where I have the forms [0] and [1], can the [0] and [1] be replaced with the forms name or id? this wil help where I might have several more forms in the page.

Q3.
Can I have an onchange function within another onchange function?

I have the two functions separate in my js file, but can I call the second function within the first function, after the first function is complete?

I hope my questions make sense, thanks for your help

GW

**jscheuer1** · 01-09-2011, 05:33 AM

Q1.

There are better ways of dealing with this issue. But you can just combine the two into one body onload using the semi-colon:

Code:

<body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs');initListGroup('houses', document.forms[1].make, document.forms[1].type, document.forms[1].model, 'cs')">

Q2.

Name, yes. Id, no (though that may work in some browsers). Examples for a form named "myFormName":

Code:

document.forms['myFormName']

or:

Code:

document.forms.myFormName

Q3.

Yes. You can call the onchange event event of another element from within the onchange event of a given element. But if this is reciprocal, you will probably get an endless loop. In a case like that it's better to call the same function from both elements onchange and have it do all that needs to be done for both elements.

**gwmbox** · 01-09-2011, 05:46 AM

Thanks for the reply.

Originally Posted by jscheuer1

Q1.

There are better ways of dealing with this issue. But you can just combine the two into one body onload using the semi-colon:

Can you give me an example please.

Yes. You can call the onchange event event of another element from within the onchange event of a given element. But if this is reciprocal, you will probably get an endless loop.

Can you give me an example of the correct way to do this please.

In a case like that it's better to call the same function from both elements onchange and have it do all that needs to be done for both elements.

Again can you give me an example please.

Thanks

GW

**gwmbox** · 01-09-2011, 09:56 AM

Can I also ask, what is the correct way to call a form element within a specific form?

I would imaging it needs to be using code similar to;

Code:

document.forms['name'].itemselect

for the form (where name is the name of the form) and

Code:

document.getElementById('fieldID').value

But what is the correct way to combine these to ensure the form ID is coming from the correct form.

Thanks

GW

**jscheuer1** · 01-09-2011, 12:34 PM

Q1.

As to onload, and a variety of other things, using a framework like jQuery (my favorite) is best. It simplifies things a lot.

But with or without something like that, you need to ask yourself if you even need to wait until onload. Usually you do not. Usually the parsing by the browser of the element(s) you want to alter is all you need before you can do what you want with them.

If that's the case, scrap body onload and place the inits or whatever in a script block just before the closing </body> tag:

Code:

<script type="text/javascript">
initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs');
initListGroup('houses', document.forms[1].make, document.forms[1].type, document.forms[1].model, 'cs');
</script>
</body>
</html>

Q2.

There are a number of correct ways to call one element's event from another. And I said that if this is done reciprocally, it will probably end up in an endless loop. That's because one element will call the other, which will then call the first, and back again, and on and on. So are you asking how to call one element's event from another, or how to get two elements to do the same thing onchange (the latter should be obvious)?

To call one element's event from another do:

Code:

<select onchange="whatever.onchange.call(whatever);"

where whatever is a reference to the element that has the onchange event that you want to run. If there are arguments place them like so:

Code:

<select onchange="whatever.onchange.call(whatever, arg1, ar2);"

To get two elements to do the same thing onchange, simply give them both the same onchange event. Include in the function for that event all that you want to have happen.

Added Question

To call a form element within a particular form, since all elements on a page that have an id should have a unique id, you may use the ById method. But if you want to use the document.forms collection and work off of the name of the form element which now only needs to be unique within the form, do:

Code:

document.forms['name'].elements['elementName']

**gwmbox** · 01-09-2011, 03:25 PM

John, Thanks for all your help, your instructions are helping me learn and that is even better, I am slowly grasping how things are done via these forums and also W3C and other sites through tutorials and lessons.... it all helps.

You mention jquery, I actually have that already within my site as I use it for a carousel function, so I guess if you think that is better maybe I should utilise that more. To be honest I have not even tried to understand jquery yet, it looked too daunting to try and understand, at least until I get to a point I have a good understanding of basic javascript. More to learn but I am enjoying the learning experience.

Again thanks for your assistance, it will go a long way

Thanks

GW

**gwmbox** · 01-09-2011, 04:08 PM

John, something is not working as it should, I am using the 'Chained Selects' script and it is working fine, however the problem I have is the onchange event is not being triggered when I make a change to any of the selects.

Using FF3.6

When I view the source I can see the three selects I have in use but not the options, e.g.;

HTML Code:

<h4>Style:</h4>
<select name="style" id="cupstyle" onchange="cuppic();"></select>
<h4>Colour:</h4>
<select name="color" id="cupcolor" onchange="cuppic();"></select>
<h4>Size:</h4>
<select name="size" id="cupsize" onchange="cuppic();"></select>

However if I view the result using Firebug I can see the options, e.g.

HTML Code:

<h4>Style:</h4>
<select onchange="cuppic();" id="cupstyle" name="style"><option value="cstyle1">Cup Style 1</option><option value="cstyle2">Cup Style 2</option><option value="cstyle3">Cup Style 3</option><option value="cstyle4">Cup Style 4</option></select>
<h4>Colour:</h4>
<select onchange="cuppic();" id="cupcolor" name="color"><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option></select>
<h4>Size:</h4>
<select onchange="cuppic();" id="cupsize" name="size"><option value="small">Small</option><option value="medium">Medium</option><option value="large">Large</option></select>

Of course the above will change depending on what items are selected which are defined in the Chained Select config file, but you get the idea as above.

I assume it is because the options are being generated on the fly. Is there a way I can still get the onchange event to be triggered with these?

Thanks

GW

**jscheuer1** · 01-09-2011, 04:50 PM

All javascript on a page is potentially related. In this case probably chained selects is overwriting the onchange events for those selects. They still show up in code view, but they're not being executed. That's where jQuery can come in handy (though with quite a bit more code, this can be done with ordinary javascript):

Code:

<script type="text/javascript">
jQuery(function($){
	$('#cupstyle, #cupcolor, #cupsize').change(cuppic);
});
</script>

Put that after the external call to jQuery and after cuppic is defined, or put its code in an external javascript file that is called after those things.

It will attach/add the event in a way that chained cannot overwrite, but that will still allow chained to work.

If I've misjudged the situation or made a mistake, or if you try this in a way that causes another issue, there may still be problems.

If you want more help on this:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**Trishah** · 07-08-2011, 05:20 AM

I have a similar but different problem... I have three <option><select> fields, each has an onchange. The <form> has an onload to the same js so that the results fields will not be blank when the page loads.

This all works fine on the original script I wrote. The problem is that I had to rewrite it to work inside a php page and now the onchange works but the onload does not.

I'm told there is a way to have jQuery run all these kinds of functions. Could someone show me how to write an onload function in jQuery?

**jscheuer1** · 07-08-2011, 02:06 PM

Please start a new thread for a new question. Writing an onload event with jQuery is simple:

Code:

jQuery(window).load(function(){
	your code here
});

But many prefer document ready:

Code:

jQuery(function($){
	your code here
});

If you want specifics, as I say please start a new thread.

Thread: multiple onload and onchange events plus...

Thread Tools

Search Thread

multiple onload and onchange events plus...

onchange working, onload does not

Bookmarks

Bookmarks

Posting Permissions