onChange triggered by Javascript

**Cainnech** · Apr 3 '10, 06:54 PM

I just noticed that by calling the onchange() on the element itself it triggers the onchange event.

So this code triggers the event.

Code:

document.getElementById("dropdown").onchange();

However this doesn't work for the script I'm working on...

This is the code that I got off the page.

Code:

<SELECT id=results_select_meeting jQuery1270319328875="153">
<OPTION selected value=04-02-2009~136~~ jQuery1270319328875="5706">Cagnes-sur-mer </OPTION>
<OPTION value=04-02-2009~7~~ jQuery1270319328875="5707">Carlisle </OPTION>
<OPTION value=04-02-2009~206~~ jQuery1270319328875="5708">Down Royal </OPTION>
<OPTION value=04-02-2009~27~~ jQuery1270319328875="5709">Kempton Park </OPTION>
<OPTION value=04-02-2009~30~~ jQuery1270319328875="5710">Lingfield Park </OPTION>
<OPTION value=04-02-2009~32~~ jQuery1270319328875="5711">Ludlow </OPTION>
</SELECT>

Now you see that there is no onchange -event in the Select. However when you choose another option, then the contents change.

Does anyone know how this works and how I can trigger the change manually?

**Dormilich** · Apr 3 '10, 09:19 PM

Originally posted by W3C

change Event:
A control loses the input focus and its value has been modified since gaining focus. This event type shall be dispatched before the event type blur.

if you manually create an event you do document.create Event() and then dispatch it at the element of your choice (Element.dispat chEvent()). but why would you need to go that far?

besides that your HTML is invalid. there are no jQuery*** attributes

**Cainnech** · Apr 3 '10, 10:17 PM

Well like I said earlier, this is code is coming from a website where I'm trying to get data off. So I can't change this code.

And for some reason when I select an option manually the content changes, although there is no onchange event.

**Dormilich** · Apr 3 '10, 10:21 PM

Originally posted by Cainnech

And for some reason when I select an option manually the content changes, although there is no onchange event.

and you consider that change not worthy an event? besides, what do you think creates a submit or mouseover event?

**Cainnech** · Apr 3 '10, 10:31 PM

Yes but I don't know what causes the change?

I already tried

Code:

document.getElementById("results_select_meeting").onchange();

But that didn't work.
So I wouldn't know which event I would have to call.

**Dormilich** · Apr 3 '10, 10:32 PM

Originally posted by Cainnech

Yes but I don't know what causes the change?

you—by selecting another option.

**Cainnech** · Apr 3 '10, 10:35 PM

Yes but I'm changing the option with javascript.

Code:

document.getElementById("results_select_meeting").selectedIndex = 4;

But that doesn't trigger it.

**Dormilich** · Apr 3 '10, 10:41 PM

then call the function that the event would have triggered directly.

**Cainnech** · Apr 3 '10, 11:19 PM

Well that's the problem I've been trying to explain, I can't find a function that triggers an onchange event.

This is the header part of the page

Code:

<html lang="en">
  <head>

	<script>
	function direct_loader() {}
	function cancelEvent()
	{
		// ie only hack
	 	if (window.event) window.event.cancelBubble = true;
		// everyone else
		return false;
	}

	var HG = {
  
 	 // Configuration ----------------------------------------
  
 	 Config: {
    // URL for the query server:
    QueryServerUrl: "/timeform",
    
    // URL for the betfair search service:
    BetfairSearchUrl: "/timeform",

    ImageUrl:         "/static/images",
    
    // Path to the course maps directory:
    CourseMapsPath: "/static/images/maps/thumbnails/",
    
    // File format used for the course maps:
    CourseMapsFormat: "jpg",
    
    // Domain name to use when fetching silks images:
    SilksImageDomain: "http://form.horseracing.betfair.com",
    
    // Path to the silks images directory:
    SilksImagePath: "/images/thumbs/silks/",
    
    // File format used for the silks images:
    SilksImageFormat: "jpg",
    
    // Path to templates directory:
    TemplatesPath: "/static/templates/",
    
    // The time in seconds to wait between refreshing the prices:
    PriceRefreshInterval: 30,
    
    // Number of search results to return:
    SearchSize: 15,
    
    // Referrer ID to use when linking to Betfair markets:
    ReferrerId: 3316
  	}
  }
	
	
	var g_display_tab = "home";
	
	</script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/static/css/hourglass.css" type="text/css" charset="utf-8">
    <link rel="stylesheet" href="/static/css/calendar.css" type="text/css" charset="utf-8">
    
    <script src="/static/js/jquery-1.2.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/template.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/calendar.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/hourglass.js?v=1" type="text/javascript" charset="utf-8"></script>
    
    <!--[if lte IE 7]>
    <style type="text/css" media="screen">
      div#sidebar div.rule { margin-bottom: 0 }
      ul.star_bullets { padding-left: 10px; margin-left: 0px; }
      ul.star_bullets li { padding-left: 0px; text-indent: 30px; margin-left: 0px }
    </style>
    <![endif]-->
  </head>
  
  <body>

There is nothing that indicates an onchange.

**Dormilich** · Apr 3 '10, 11:25 PM

Originally posted by Cainnech

Well that's the problem I've been trying to explain, I can't find a function that triggers an onchange event.

that’s not what I meant. you always use an event to trigger a function. like

Code:

sel.addEventListener("change", doSomething, false);

if you are "changing" the select manually, you do it to trigger doSomething(), but if you’re already messing with the select, what prevents you from calling doSomething() yourself?

PS. Events are almost always triggered by user interaction. (maybe despite click() and submit())

**Cainnech** · Apr 4 '10, 12:01 AM

Well I tried your suggestion of the submit() but without any luck.

And even if I could add the onchange myself, I wouldn't even know what function to call because I don't know how the website is built.

**Dormilich** · Apr 4 '10, 12:14 AM

Originally posted by Cainnech

Well I tried your suggestion of the submit() but without any luck.

that was not a suggestion, that was an example.

Originally posted by Cainnech

And even if I could add the onchange myself, I wouldn't even know what function to call because I don't know how the website is built.

er, then why do you want a change event???

**Cainnech** · Apr 4 '10, 12:40 AM

Well I'll try to explain again.

I'm loading an external website into an iframe. In order to reach information I want to get off of the website, I need to select an option in a select-element.

I'm doing this with the help of a script that selects the option.

If I did this manually the moment that I selected an option, the content would load in a div.

But now I'm doing this with javascript. The problem is that I can select the option I need but it doesn't change the content in the div.

So I'm looking to find a way to have the site react when I choose the option with javascript like it would when I would click with the mouse on the option.

**Dormilich** · Apr 4 '10, 12:44 AM

Originally posted by Cainnech

If I did this manually the moment that I selected an option, the content would load in a div.

this is done through a function. find it and call it manually.

onChange triggered by Javascript

onChange triggered by Javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment