Add two functions to 'onchange'?

[Bar2aYunie]

Hello,

I am wondering if it's possible to add two functions to the onchange command. Right now, I'm building a dynamic drop down form, which has a total of 5 drop down lists. The options are dependable on each other, meaning that whenever an option from the first list is selected, the options in the second list depend on the opton chosen previously.

Right now, the onchange action is saying:

onChange="ChangeProduct(this.value)

But, I want that whenever an option has been chosen, not only the options for the second list appear, but I also want to display some information about the chosen option. So it must also let some text appear. I tried that with the help of:

 onchange="SelectionInformation(this,ProductOne)

But can I combine this? Can I, and if I can...how can I tell the onchange function to do two things: display the next set of options and display the information?

Any help is appreciated!
Thx!

[djr33]

Any event that uses javascript as its argument can take full javascript, as long as you want.

onchange="[insert full script here]"

To keep things simple, it is better to not put too much there, just so that the html stays readable, so you can put it in functions in the main script.

But, yes, two functions are easy, using the same syntax as in regular Javascript:
onchange="func1(); func2();"

Just remember to use the semicolons. Technically even with one thing inside you should be using a semicolon to end it, but few people do because this is not strictly required-- but to separate multiple elements you need them.

Alternatively, if you want to make it even simpler, you can make a function above:
function func3(a,b,c) {
func1(a);
func2(b,c);
}
and for the onchange:
onchange="func3(a,b,c);"

[Trinithis]

onchange="function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };"

[jscheuer1]

onchange="function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };"

Trinithis, I think that will give an error, or at the very least, since your anonymous function isn't self executing, nothing will happen. If you were assigning the event in javascript, it would be correct if you removed the quotes:

someElement.onchange=function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };

But for assignment as an inline event attribute, it should be like:

<select onchange="ChangeProduct(this.value); SelectionInformation(this, ProductOne);">

[Bar2aYunie]

Okay great! Thank you for your help! I do have another question, if I may.

Is it also possible to specify when to do what with the onchange function?
I have that dynamic drop down menu, so it creates the options like this:

Option1: <select id="Options1" onChange="Populate('Options2',Options2,this.value)"></select>

And I'd like to specify what kind of information I'd like to display. So if option one has been selected, not only the second box is filled with options, but also I'd like to state that it will display information. Now, that you explained, but how can I say that when option one has been chosen, it has to display information one / when option 2 has been chosen, it must display information 2 / when option three has been chosen, it must display information 3 and so on. Then, I can explain what kind of information I'd like it to display using the vars. Since right now, I'm only saying it to display information, not specified when to display which line of information.

You following me? Since right now, even though I have the script for the information and the lines of information.... after I added in your line, it doesn't work. I guess since it doesn't know when to display which line. Am I right?

[jscheuer1]

When a select changes, its value property becomes that of the selected option:

<select onchange="doWhat(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="result">&nbsp;</div>
<script type="text/javascript">
function doWhat(v){
	var r = document.getElementById('result').firstChild;
	v = v.value;
	if(v === '1'){
		r.nodeValue = "You Picked One.";
	}
	else if(v === '2'){
		r.nodeValue = "You Picked Two.";
	}
	else if(v === '3'){
		r.nodeValue = "You Picked Three.";
	}
}
</script>