CHeriCoS

I just stumbled across another strange Internet Explorer bug when it comes to input fields and forms. One of the most common requirements when coding a cultural heritage website with a database backend is to implement a so-called "google search". One input field, hit run and go. In PHP i'm used to check if the name of the hit button and it's value is set inside the POST-array. So if there is a form like this one ... <form id="searchform" action="index.php"> <input type="text" size="40" name="term" value=""/> <input type="submit" name="submit" value="Search"/> </form> ... I expect that after hitting return I have this $_POST array available in PHP: Array ( [term] => mySearchTerm [submit] => Search ) Afterwards you can do something like this in PHP to test if a and which form has been submitted: if (isset($_POST['submit']) { ... do something } This is especially useful if there are more than one form on the initial page. This will work with all common browsers, but sadly this is not true when using the Internet Explorer! You will get this array if you are using the mouse to click on the submit button. But when you hit return to submit the form you will get this array: Array ( [term] => mySearchTerm ) How cuckoo is that? What did they think in Redmond by implementing this behaviour or did they think at all? With the help of almighty Google I finally found a work-around which is described in this blog post by Richard Szalay. He deals with ASP.NET, but the problem and the solution are the same for other environments, because it's actual a problem on the HTML level. The described behaviour only occurs in IE when there is only one input field in a form and you submit this form by hitting the return key. If there are 2 or more input fields, IE acts the same way as other browsers. So the workaround is to add a second hidden input field to the form for IE only and disable it. A typical form would then look like this: <form id="searchform" action="index.php"> <input type="text" size="40" name="term" value=""/> <input type="submit" name="submit" value="Search"/> <!--[if IE]><input type="text" style="display: none;" disabled="disabled" size="1" /><!--> <input type="submit" name="submit" value="Search"/> </form> Using this workaround, IE will always submit the send button too, wether the return key is used or not. The if-statement is a conditional comment to assure that this tag is added in IE only. The attributes are added to reliably hide this input in css and non-css browsers.