Ask a Jedi: Disabling form submission when using ColdFusion Ajax Binding

This post is more than 2 years old.

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.

<form method="post"> <input name="testvalue"> </form>

<cfdiv bind="url:test3.cfm?key={testvalue}" />

<cfdump var="#form#" label="Form in main view">

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by David posted on 7/12/2010 at 8:08 AM

Jquery has a nice method for this if you're in an event handler, event.preventDefault() then you don't have to return false and it has more meaning. So in theory this could be written as $('form').submit(function(evt){evt.preventDefault}). More typing so prob only wrth it if you're writing something custom anyway

Comment 2 by Raymond Camden posted on 7/12/2010 at 3:20 PM

Yep, good tip. I try to jQuery-ify everything, just couldn't justify it here for one line. ;) As a side note though, the guy who needed this let me know that the code failed to work in IE8, so it might end up being that we _do_ need the jQuery version.

Comment 3 by Zach posted on 4/20/2011 at 4:59 AM

Ray, thank you for posting this!!! I have been banging my head for three hours, trying to figure out why, when pressing Enter, my cfdiv tag just blanks out the form and doesn't pass any variables. Adding that OnSubmit code finally made the form variables work inside my cfdiv when Enter is pushed. Jeez. I need to add this to the LiveDocs.

Comment 4 by Raymond Camden posted on 4/20/2011 at 5:15 AM

Glad to help.