spacer

 

Sunday, September 10, 2006

Internet Explorer Submit Button Bug




I've know about this problem for almost 3 years now. I guess It's time to put the blog out.

Affeted IE Version: 5 and 6
Firefox, Bon Echo: Not affected

The Bug
If we have a form where only one text field exists:
<form>
    First Name: <input type="text" name="firstName"/><br/>
    Roles:  
    admin: <input type="radio" name="role" value="admin" />
    user: <input type="radio" name="role" value="user"checked="checked"/><br/><br/>
    <input type="submit" name="submitButton" value="submit"/>
</form>

When the user enters a first name and hits the enter button, here's
the query string and by George the submitButton is missing!

ie_submit_button_form.htm?firstName=John&role=user   

I know what you're thinking: IE sucks! Microsoft is Evil! Son-of-a-$*#@@#&!
I know. I know. But nobody writes perfect code so I'll show you how to fix this problem.

What's suppose to happen by default is that the first declared submit button should be set. In our case it's the submitButton. In IE, this doesn't happen.

The Workaround
So the way to fix this bug is add another text field. In most cases where you don't have a choice and there's only 1 text field in the form, you can add an invisible text field (a hack):
<input type="text" style="display:none;"/>
Now let's try this again, given the following code:

<form>
    First Name: <input type="text" name="firstName"/><br/>
    Roles:  
    admin: <input type="radio" name="role" value="admin" />
    user: <input type="radio" name="role" value="user" checked="checked"/><br/><br/>
    <input type="submit" name="submitButton" value="submit"/>
</form>

Focus on the first name field and type a name, then press Enter key.
Here is the query string and the submitButton is set:
ie_submit_button_form.htm?firstName=George&role=user&submitButton=submit

Putting an invisible text field is not a bad hack and does not require code change when new versions of IE come out. It's also not going to affect the other browsers that are functioning properly...nevertheless, it's a hack!


No comments:

Popular Posts

Featured Post

Encrypting Properties File Values with Jasypt

Encrypting Properties File Values with Jasypt What's the fuzz all about? Property files are text resources in your standard web applic...