Tuesday, June 10, 2008

Internet Explorer Firefox Form Posting differences

I ran into one I haven't in a while or forgot about: the differences between the major browsers in how it posts form data.

Regardless of whether it's a method="post" or method="get" in your form, if you submit a form using 'Enter' (the Enter key on your keyboard) vs. if you click the submit button to submit your form, you will get different values passed in the different browsers.

I'm lumping FireFox and Safari together on this one as they act the same, Internet Explorer 7 being the odd man out.

Firefox/Safari will pass the 'First' submit button along with your form (first in the DOM or on page) when you hit the 'Enter' button to submit the form (like in a simple search box etc.)
Internet Explorer on the other hand will NOT pass any submit buttons if you don't click on them explicitly.

This could be looked at as a good thing, in the event that you have multiple submit buttons and are doing different things based on the value of the submit button etc.

Regardless of which process I believe is correct or not, the Internet Explorer interpretation of this data was unexpected for me as I test in Firefox all the time. My solution was to simply put a hidden form field that is named the same as my submit button which I knew will get passed through the form regardless of what browser they are using. This fixed the problem for me (there are other solutions like disabling the 'enter' button to be pressed in a given box etc)

Code:

<form method="get">
<input name="txtBox" value="" type="text">
<input name="otherstuff" value="x" type="hidden">
<input name="btnSubmit" value="Submit" onclick="return true;" type="submit">
<input name="btnSubmit" value="Submit" type="hidden">
</form>

2 comments:

Will Belden said...

I think there's a potential issue with this. I believe that if you click the submit button, you'll get this:

form.btnSubmit = "Submit,Submit"

I know that if you have checkboxes with the same name, like:

  <input type="checkbox" name="a" value="1"/>
  <input type="checkbox" name="a" value="2"/>

...and you check them both, you get:

form.a = "1,2"

You might give it a check out.

- Will B.

Code Fusion, LLC said...

You are correct - you will get doubling up of the form field passed through in the url/form as either 'btnSubmit=Submit&btnSubmit=Submit' or if you look at cfdebugging 'btnSubmit=Submit,Submit'. However, since I'm just needing to know if the button was pressed, and not what the 'value' is of that button in this case, then it's safe to ignore the value that's passed in. But you are right and should be noted. (If you click the button you'll get this duplicate behavior vs. if you just hit enter, then only the hidden field is passed)