Video Screencast Help

Auto Click Button with AutoCompleteTextBox

Created: 26 Feb 2013 • Updated: 27 Feb 2013 | 13 comments

I am trying to set up automatically clicking on a button associated with an autocompletetextbox and am having trouble.  I am using the following instructions that were written for a selection from a drop down list.

1. Make the Control ID of the button "woohoo" (no dbl quotes)

2. For the DropDownList, add a AttributeKeyValuePair custom event to the Custom Events in Functionality / Behavior

Make the event onpropertychange, and add the event handler script as follows:


var button = document.getElementById('woohoo');;


Is there something I should be doing differently?

Thank you,


Comments 13 CommentsJump to latest comment

SDriver's picture

I just use this:;

EDIT: Sorry, this only seems to work with other components, tried it with autocomplete textbox and nothing seems to work, I think its the onpropertychange that might be wrong, tried OnBlur & OnAfterUpdate, the only reaction I got was from OnFocusOut (but its not quite right when user clicks outside of box it activates)

SyncUp's picture

If it doesn't work with the autocomplete textbox, would this be considered a bug?  If so, how do I report an incident?

reecardo's picture

My initial guess is that there's an "autocomplete" element to this component, and there's some form of a post and it's wrecking the calling of the event.

SyncUp's picture

Yes, I am using the autocomplete feature.  I type in the first few characters of a person's name and then select the user I want.  I then have to click a button to select the user and populate the grid.  I'm trying to avoid having to click the button to select the user.  I've tried a few of the events, onblur, onfocus, onpropertychange.  Are you thinking I just haven't found the right event call or is there not even one that will do the job with the autocomplete?  Do you have any other suggestions as to how to achieve what I am trying to do?  I am attaching a copy of my workflow.

Thank you!

AttachmentSize 202.56 KB
rhamner's picture

Autocomplete textbox is made up of a few controls so the actual input control id gets a '_t' appended to whatever you enter. Try this:

  1. Set 'Control ID' property on AutoCompleteTextBoxComponent to 'autocomplete'
  2. Right click on a blank spot in your Form Builder and select Edit Form. On Behavior tab in 'Body Custom Events' choose add and select the 'onload' property. Insert the first JS blurb from below.
  3. On the same Behavior tab paste second JS blurb from below into the Script property
  4. This js asumes the botton's name is woohoo like the other example.

JS for Step 2:

var autocomplete = document.getElementById('autocomplete_t');
if (window.addEventListener) { // IE 9
autocomplete.addEventListener('blur', ClickTheButton, false);
else {
if (window.attachEvent) { // IE 8 --
autocomplete.attachEvent('onblur', ClickTheButton);
JS for Step 3:

function ClickTheButton() {

var button = document.getElementById('woohoo');;


SyncUp's picture

Thank you for the instructions but I am still having trouble.  I am running IE 8 and here are screenshots of how I entered the info you sent over.  It looks like steps 2 and 3 are entered in the same area, but let me know if I misunderstood.

Settings for autocomplete box:

Settings for button (Add User):

Right click on form and select Edit form:

Enter onload in the Event of the Behavior section:

Enter js2 and js3 in the Event Handler section:

rhamner's picture

Sorry, i messed up.

3 should read:

On the same Behavior tab paste second JS blurb from below into the Script property.

In your 3rd screenshot you can see the 'Script' property at the bottom of the editor. The ClickTheButton function should go there.

SyncUp's picture

OK, so now I have the Script property populated with the below function and removed it from the Event Handler section.

function ClickTheButton() {

var button = document.getElementById('woohoo');;


I'm still not having any luck.  Maybe I have something in my workflow that is keeping your solution from working?  I am attaching the latest version with the changes.  This copy has visible set to "true" for the button so I can continue on when testing.

AttachmentSize 203.12 KB
reecardo's picture

Your attached project works for me in IE9. Note that you have to tab off or otherwise make the autocomplete textbox lose focus to make the click happen.

SyncUp's picture

I don't know what could be different between our environments.  I upgraded to IE 9.  I've also tried it with IE enhanced security enabled and not enabled.  I also hit tab after selecting a user's name as well as hitting enter.  I'm not sure what else to look at?

rhamner's picture

Maybe you could post the HTML produced at runtime. Just right click on th page in IE and view source. You can save this as a file and attach it.

reecardo's picture

I'm attaching a capture of the flow in design time with all the script added as well as running in IE 9 in runtime. I'm tabbing off the textbox to get the click to fire. Hopefully this can help us figure out what the issue is

2013-02-28_1303.swf 7.37 MB
SyncUp's picture

That is pretty slick how you captured your screen.  I still don't know what is different?  I see you aren't really searching AD so I modified my AD properties so that I wasn't really searching and still don't get the click on the button like you do.

I entered the first 3 letters of the name:

I clicked on a user and hit tab.  The button is highlighted, but does not click.

I then clicked on the autocomplete textbox with the name again and hit enter.  I then get a "Processing" message, but not sure what is being processed?

I changed the message for the button to show "Button Waiting" so I would know when the button was processing.  If I click on the button or hit enter when it is highlighted, I see "Button Waiting".

The user is then added below Users Selected

Thank you for looking at this and giving me suggestions!