I like to provide clear visual or textual cues for an application. In the admin interface for one of my apps, I provide a pretty easy way of rejecting or accepting form submissions for a class – a red “X” to reject, and a green checkmark to accept. In order to pass these actions to the ColdFusion page on the server side and rely on POST rather than GET, I used the image form control.

You can use images as command buttons in a form pretty easily – <input type=“image”> is a pretty good place to start.

There’s one problem with this – Internet Explorer (including version 7!) doesn’t pass the value attribute of an image control to the server. In ColdFusion, the value is critical, as it’s what’s used to identify controls on the server side (e.g. #arguments.FirstName# would pull the value of whatever control is named FirstName). It does, however, pass the X and Y coordinates of where the user clicked on the image, by adding .X or .Y to the end of whatever is set as the value attribute (e.g. FirstName.X).

The remedy is to use a different value for each image. I was previously treating them all like Submit buttons. In the case of my app, I have one image with a value of accept and one with a value of reject. My code on the backend looks like this:

<cfif isDefined('arguments.accept.x')>
  <!--- process the application as accepted --->
<cfelseif isDefined('arguments.reject.x')>
  <!--- process the application as rejected --->
</cfif>

It’s an easy solution to an annoying problem. The one caveat about this is that IE will also show the user where the form is going to post, by displaying it in the status bar at the bottom of the browser window. While the user can obviously view the source code if they desire, it’s just something to keep in mind.