The Submit Button Problem

My reckless lack of Internet Explorer testing has come back to bite me in the ass, again. Thanks to the one member of my development team who actually has the common sense to open up a copy of the vile Internet Explorer for testing purposes, we have found a major problem in Plogger. The main functionality of adding a collection or an album doesn’t work at all.

Instead of getting all uptight about the issue — and I assure you, uptight I am — I decided to post the solution here and chalk it up to “IE Sucks”.

The problem is coupled with the use of the HTML 4.0 tag <button></button>. This tag was designed to extend the usage of the <input type="submit"/> and give you the ability to make any peice of HTML a “button” by placing its contents within a “button” container (between the tags). You can create image buttons, colored text buttons, or a myriad of other things. Hence, the following peice of HTML would serve as a fine “add” button for our “Add Collections” dialog.

<button type="submit" name="action" value="addCollection">Add</button>

This is where IE deviates from the HTML specification. Below is the URL produced by Firefox and the URL produced by IE upon clicking the submit button.

IE: plog-manage.php?action=Add&name=...
Firefox: plog-manage.php?action=addCollection&name=...

As you can see, Internet Explorer passes the text “Add” as the value of “action”. Firefox does the proper thing and sends the value placed in the “value” attribute, whereas IE sends the content inserted between the button tags. As a result, the PHP code which checked the value of action from the $_REQUEST array had a value it didn’t know what to do with, “Add”.

So the solution turned out to be pretty simple, reverting the code back to the tried and true <input type="submit" name="something" value="somethingelse".../> tag. Both browsers reliably send the “value” attribute when building a POST or GET URL encoded string from an input tag.

The code has been updated and repackaged, you can re-download it here. If you plan on administering your Plogger gallery from Internet Explorer, you will have to get the new code and patch your existing installation. The two files that have been changed are /css/admin.css and plog-manage.php. Simply upload these two files and overwrite the old copies and you should be good to go.