Thursday, July 17, 2008

Missing form ACTIONs

Say you want to disable a submit button when it's clicked, to prevent the user from submitting twice:

<form name="myform">
  <input type="submit" value="Submit" onclick="this.disabled = 'true';">        
</form>

On Windows, this works fine in IE but not in Firefox. Or so it appears. What's going on?

Oops, you forgot an ACTION attribute in your form. (It's okay, this is common if you're planning an Ajax-style app.) Without it, IE just ignores the submit click, but Firefox uses the current page as the default action. So it effectively reloads the page, resetting the button state.

The thing is, the submit button is being disabled in FF, just like in IE, but depending on how fast the page reloads, you might not even notice.

6 Comments:

At 12:33 AM, Blogger Andrew Durdin said...

The action attribute is required: http://www.w3.org/TR/html401/interact/forms.html#h-17.3

So the user-agent's behaviour if it is missing is undefined and should not be relied upon.

 
At 7:43 AM, Blogger jx-opher said...

You can prevent the default action by returning false and submit the form directly from inside the onclick handler:

onclick="this.disabled = 'true'; this.form.submit(); return false;"

 
At 12:28 PM, Blogger Ryan Doherty said...

Interesting quirk, I think I've run into it before.

I'd argue with your point about how not having an 'action' doesn't matter if you are creating a Javascript app. It does matter! Graceful degradation. Your website should function without Javascript.

And you shouldn't have Javascript in your HTML. A clean separation of content, style and behavior is very important for a well-structured web app.

 
At 5:34 AM, Blogger Inspiron said...

Yeah..great tips..
U should update ur blog regularly.
Cheers,
Free mobile phone games

 
At 7:24 AM, Blogger Unknown said...

Another reason to write proper HTML and validate it.

 
At 4:26 PM, Blogger Hmaze said...

great assistance from you. I am having this kind of problem whenever updating my blog, inconsistencies between mozilla and explorer apprearance. i'got to try and error, then only it works

 

Post a Comment

<< Home