Stopping <button> tags submitting on carriage return in IE

17 Nov 2010

File this one under 'I got so annoyed about this I decided to write a blog post'. Surprisingly, I had to find the answer out myself, rather than trust in the twin Gods of Google and StackOverflow.

In the bliss album detail page it's possible to change album names, artist names, years of release and more. Technically, this is done with an <input> text field which submits the new value upon blur, or carriage return. It uses the splendid Lift Ajax support.

This <input> field is not within a form.

Meanwhile, below the <input> field, is the 'Rescan' button, technically a HTML <button>. When clicked, this submits a request to reassess the given album against the music rules.

In Firefox, Chrome and Safari, you could press carriage return ([Enter]) when changing an album name, or whatever, and only the name would be changed.

On IE, which is a little too helpful, the Rescan button is also clicked as a result of the carriage return.

Turns out the default 'type' attribute of a <button> tag in IE is 'submit'. This is to help the user when filling in forms so that a press of carriage return submits the form immediately. In this case, as all the controls were individual ajax-ified widgets, this was not what I wanted. I fixed it by explicitly declaring the type as 'button':

<button title="Re-assesses this album and potentially automatically fixes any problems" class="rescan" type="button">

Now, the user can press carriage return while editing an album name, and the Rescan button is not invoked.