Be sure to read the update at the bottom of the post.
Art de Noise asked:
I have a simple cfdiv bound to text input box that does a search. It works fine if I tab out of the input box (and fails if I hit the return key. I have tried different events on the bind and tried some Javascripts that sought to have the return key emulate the tab key, all to no avail. Any idea why the tab key succeeds with the bind and the return key aborts?I definitely have an idea. Let's start with a simple example though so we are on the same page.
<cfdiv bind="url:test3.cfm?key={testvalue}" /> <cfdump var="#form#" label="Form in main view">
<form method="post">
<input name="testvalue">
</form>
This is my main template. It's got form that we will use for binding. The div points to a URL and uses the bind pointing to the testvalue field. I won't bother showing the code for test3.cfm. For my demo all it did was a quick cfdump on the URL scope. This helped me test. Notice the dump of the form scope. This is going to help ensure we see the problem Art was talking about. Sometimes when working locally the response of your page can be so quick you don't notice it. This dump will help ensure I don't miss it.
So given that code, if you type something in the field and hit the tab key, or just plain click, then you will immediately see the div load up the value and the dump will reflect it:
But if I change the value and hit enter, I get:
The enter key submitted the form. Not desirable at all, but the natural behavior. Luckily it is pretty easy to fix. Just kill the form submit action!
<form method="post" onSubmit="return false">
This still allows the bind to detect the change but prevents the form from being submitted.
EDIT JULY 12: Guess what? The code above doesn't work in IE8. The form submission is blocked, but it also appears to block the 'blur' event for the field. I tried the following and it worked everywhere:
<form method="post" onSubmit="window.focus();return false;">
Basically I just force focus back to the window.