aaaiiiIEeee 7/8 bug

There seems to be a weird form submission bug in old versions of Internet Explorer (i.e.* 8 or earlier).

Generally a form will have various input fields and a submit button. Clicking the submit button sends all the form data to the link specified by action in the format specified by method. This is forms 101. All input fields' data will be sent, including the submit button value itself. Consider a simple example:

<html lang="en">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Form Enter-key Submission Test</title>
    <div id="formbox">
      <p>On submission, the two POST variables should be displayed above. 
When clicking the Submit button, all is well, but when just pressing Enter 
in <IE9, only the text input is sent to the server</p>
      <form method="POST" action="?">
        <input type="text" name="txt" id="txt" value=""><br>
        <input type="submit" name="submit_btn" id="submit_btn" 

(That's right - fully doctyped and charsetted, biyatches. Just because it's an example, doesn't mean it can't be standards-worthy.)

So it should be obvious what the page does. There is a form consisting of a text box and a submit button. The form submits to itself, and the page reloads with whatever data it was sent via POST.

In all modern browsers, it makes no difference how the form is submitted. If you press enter while the text box is in focus, it will work exactly the same as clicking the Submit button. But in IE7 and IE8, there IS a difference. The submit button data itself is not sent unless the form is submitted by clicking the submit button. An enter press sends all other fields but not the submit button.

So yes, it's an interesting bug, but why does it matter, you ask?

Well, that's some attitude you've got there, mister. I'm only trying to help you.

The reason it matters is because I often use the submit button values to check if a certain form was submitted. If there are many forms on a page, I use a different name/value pair for each form's submit button, then do something like this at the top of the page:

if (filter_has_var(INPUT_POST, 'submit_form_1'))) {
  //handle form 1
else if (filter_has_var(INPUT_POST, 'submit_form_2'))) {
  //handle form 2

Obviously this won't work if the user is stuck on IE7 and likes just hitting enter to complete a form. So, the obvious workaround is to include a hidden input and check it instead of the submit button.

*ho ho

No comments:

Post a Comment