JavaScript
Document (8)
Events (8)
ExtJS (7)
Strings (3)
Exchange Links
About this site Links to us 
|
Programmatically call the javascript onchange event handler
 10 comments. Current rating:  (7 votes). Leave comments and/ or rate it.
Question:
My javascript function updates an array of controls (listboxes) and makes selections. I would like to have the onchange event handler fire after each change but it does not get executed. How can I programatically call the handler?
Answer:
There is no special trick to this other than checking first if the event handler for the given control is actually defined - to help avoid a runtime error.
if (document.form1.listbox1.onchange)
document.form1.listbox1.onchange();
Another observation I made is that some HTML editors will generate HTML like this:
<select .. onChange=myFunction()>
Note that the event name is in mixed case here (capitalized C) but the name of the property has to be written all lower case as shown at the top.
Comments:
|
|
|
|
So,, Is there a way to fire this event programatically???
|
|
|
|
|
Did you get an answer to this problem? If so can you tell me how to solve it, I'm struggling with the same issue.
|
2007-09-17, 16:47:52 (updated: 2007-09-17, 16:49:24) |
|
|
|
hahahaha, ah, that cracks me up. But yeah, the answer is right. Just get hold of whatever DOM element it is you need, check that onchange is actually there (saving yourself from a possible exception) and then call onchange() on it.
E.g. you have a listbox with various regions in it and you want it to be set to 'Europe' (one of the values you loaded it with):
var regionDropdown = document.getElementById('region');
regionDropdown.value = 'Europe';
if (regionDropdown.onchange) regionDropdown.onchange();
|
|
|
|
|
It seems the question was, if the onchange event is not specified in the HTML Tag and we only have javascript to tell that HTML Tag to fire onchange event, without mentioning it in the Tag itself ??
Can we later access that Tag and attach the onchange event to it ? If yes, Can you show us an example ?
|
|
|
|
|
To attach a event into a control use this code
if (document.all) //IE6
{
field.detachEvent('onfocus', function);
}
else //Firefox
{
field.removeEventListener('onfocus', function, false);
}
|
|
|
|
|
Thanks for the example on showing how to call an event in your code. Just what I was looking for...... too easy.
|
|
|
|
|
Yep works all righty.
$('select_name').value = 'x';
$('select_name').onclick(); /* could if it exists first, too */
|
|
|
|
|
the best way is to do the whole thing programmatically and get it to execute some code is to assign the code to the event then fire it as said above - much more elegant and all the code is in the same place.
No need for any onChange attribute in the html then.
to assign :
document.element.onchange = function(){
// do code
};
or:
function DoCode(param){
//do code
}
document.element.onchange = DoCode('param');
|
|
|
|
|
good one...
|
|
|
|
|
function check()
{
var dlist=document.getElementById('DropDownName');
if(dlist.options[2].selected==true)
{
document.getElementById('PanelName').style.visibility=true;
}
else
{
document.getElementById('PanelName').style.visibility=false;
}
}
|
|
