Geeks With Blogs
If you can't riddle them with questions... ...riddle them with bullets.
I love standards -- a lot.  I can't even tell you how much I love standards.  I sing the joys of standards every day that I'm allowed to use them.

Wait-- what was that?  Allowed to use them?  Sadly, its true.  In some of the systems I work on the only way to make a system work is to make it work in an unsupported way.  quirks in IE frequently don't help that process.  So I'm going to talk a little bit about standards now, specifically as they pertain to the html tag <button>.  A friend of mine was having some trouble at work.  He dynamically creates a button using javascript at a certain point of execution during page load.  After the page finishes loading, he clicks the button, and it should redirect to another page -- except it doesn't.

Well, it kind of does.  In Internet Explorer, when he clicks the button the redirect is successful.  When he does this in firefox, it simply reloads the page.  I looked at the CGI handling the redirect and noticed that it was receving one request when the button was clicked in IE, and two requests when it happened in firefox.  So I was confused -- there is a facility within our CGI to do automatic redirects from one request handler to another -- but there was no indication that this was occurring.  And it was even more strange that it was only an issue with firefox, and not with internet explorer.  So I figured it must be a browser issue, but I was confused as to what.

The issue is actually rooted within the HTML 4.01 Standard.  Here is the DTD for the button element.

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- push button -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED  -- sent to server when submitted --
  type        (button|submit|reset) submit -- for use as form button --
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

This means that according to the w3c standard, all buttons are supposed to be type "Submit" by default.

Unfortunately internet explorer doesn't care.  So when he put a tag that went something like thisin IE:  <BUTTON ONCLICK="dosomething()"></BUTTON>.  IE treats the "type" attribute as "button" by default rather than "submit" -- not in line with standards here.  So yes, my friend's button was working correctly in internet explorer, but it wasn't working correctly in Firefox.  In firefox, the button is "submit" by default -- so it will execute that function, do the redirect, then faster than you can blink your eye submit the form and it will redirect accordingly.  So its a double redirect that in the end leads you back to where you started and makes it look like its a problem with firefox.  Its not.  Fortunately, the problem is easily fixable.  Explicitly set the type attribute to "button" or return false in the onclick function -- to stop the submission.  So your button would look like this....

<BUTTON ONCLICK="dosomething(); return false;"></BUTTON>

or this...

<BUTTON ONCLICK="dosomething();" TYPE="BUTTON"></BUTTON>

That is all.  And with that, I'm off for another day at work.  Posted on Monday, July 28, 2008 9:05 PM Internet Explorer , Firefox , Standards | Back to top


Comments on this post: I love standards

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © agundel | Powered by: GeeksWithBlogs.net