Javascript - Manually trigger onchange

[dvandelay]

I have a macro that fills in a web form.

When an item in the "Campus" dropdown is manually selected, the "Merchant" dropdown populates. This requires triggering the onchange event, which does not happen when an item in the Campus dropdown is selected from a KM macro.

I could use some help on how to do that.

I think the code below is the relevant line from the page. Let me know if any additional code from the page is necessary. (The page is only accessible when logged in as an admin on the site.)

<select name="dnn$ctr901$AddReward$ddlCampus" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;dnn$ctr901$AddReward$ddlCampus\&#39;,\&#39;\&#39;)&#39;, 0)" id="dnn_ctr901_AddReward_ddlCampus" class="divDropDown">

Thanks for your help.

-Dave

[JMichaelTX]

@dvandelay

I could use some help on how to do that.

In JavaScript, get a reference to the select element, and use the click() method with it.

For example (untested):

var selectElem = document.querySelector('select[name="dnn$ctr901$AddReward$ddlCampus"]');
selectElem.click();

[dvandelay]

Thanks for the suggestion. I tried this action, but the Merchant menu didn't populate.
I don't know javascript at all, so I'm not sure where to start for troubleshooting.

[dvandelay]

@peternlewis directed me to a specific entry in stackoverflow, but I'm not knowledgeable enough to effectively use the info there:

How can I trigger an onchange event manually?

[JMichaelTX]

@dvandelay

@peternlewis directed me to a specific entry in stackoverflow, but I'm not knowledgeable enough to effectively use the info there:

This basically states:
element.onchange();

So, try:

var selectElem = document.querySelector('select[name="dnn$ctr901$AddReward$ddlCampus"]');
selectElem.onchange();

[dvandelay]

Thanks for the help. Seems like it should be pretty straightforward, but I just updated the Execute JavaScript action and it still didn't populate.

I even tried putting long pauses between each step just to be safe.

[JMichaelTX]

@dvandelay

Thanks for the help. Seems like it should be pretty straightforward, but I just updated the Execute JavaScript action and it still didn't populate.

Sorry about that. To be of any real help I'd need the actual URL to investigate and test. If you wish, you could send it to me in a PM.

[dvandelay]

@JMichaelTX

Sorry about that. To be of any real help I'd need the actual URL to investigate and test. If you wish, you could send it to me in a PM.

Thanks for the offer, but the page is only accessible when logged in as an admin and I'm not permitted to share the credentials.

[dvandelay]

I feel like I'm close. How about... instead of trying to simulate triggering the onchange event, just execute the javascript that's called when the onchange event is triggered?

Here's the line of code for the Campus dropdown:

 <select name="dnn$ctr901$AddReward$ddlCampus" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;dnn$ctr901$AddReward$ddlCampus\&#39;,\&#39;\&#39;)&#39;, 0)" id="dnn_ctr901_AddReward_ddlCampus" class="divDropDown">

Any suggestions as to what part of the onchange value I need to put in the KM "Execute JavaScript in Google Chrome" action? (I tried a few different things, but none of them worked.)

These are the three snippets I tried:

javascript:setTimeout('__doPostBack(\'dnn$ctr901$AddReward$ddlCampus\',\'\')', 0)

setTimeout('__doPostBack(\'dnn$ctr901$AddReward$ddlCampus\',\'\')', 0)

doPostBack(\'dnn$ctr901$AddReward$ddlCampus\',\'\')

[peternlewis]

Try changing it from “ignore results” to displaying the results, then you will see any error message.

Also, try using the console in Google Chrome, and pasting the code in there. Get the code working within the console and then once it is working it should work in Keyboard Maestro’s action.

[JMichaelTX]

@dvandelay

I feel like I'm close.

As @peternlewis says:

@peternlewis

try using the console in Google Chrome, and pasting the code in there. Get the code working within the console and then once it is working it should work in Keyboard Maestro’s action.

We need to start with the basics: Is the <select> tag properly found?
Try just this:

selectElem = document.querySelector('select[name="dnn$ctr901$AddReward$ddlCampus"]');

when you paste that into the Chrome Console, and press RETURN, it should show you the select statement like this:

Confirm that this is giving the the right select.

[dvandelay]

Appreciate the help. So far so good...

[dvandelay]

And this is the action I use to set the campus (which seems to work fine):

[JMichaelTX]

@dvandelay

Appreciate the help. So far so good...

OK, that's great. The fact the setting the CampusID does NOT trigger the onchange tells us something else needs to be done. But what?

Sorry, I am going to need the actual HTML on the page before I can really be of further help. This is a complex page, and I will need to inspect and test.

You could select/copy the outerHTML of the first major <div> above the <select> statement, and post that here, or in PM.

[dvandelay]

@JMichaelTX

You could select/copy the outerHTML of the first major <div> above the <select> statement, and post that here, or in PM.

Sent source in PM.