Rob's Blog

Despite it’s rapidly declining user base, IE6 is still causing headaches to web developers. This morning I had was testing a form I’d built in IE6, after confirming it worked in all other common browsers. The form in question contained a whole bunch of <button type=”submit”> tags, and depending on which button you clicked, the server-side code would perform an action, eg:

<form method="post" action="blah">
  <div>
    <button type="submit" name="cancel" value="cancel">Cancel</button>
    <button type="submit" name="continue" value="continue">Continue</button>
  </div>
</form>

if (array_key_exists('cancel', $_POST))
  return DoCancel();
else if (array_key_exists('continue', $_POST))
  return DoContinue();
else
  return DoNoAction();

The HTML4.01 spec says:

If a form contains more than one submit button, only the activated submit button is successful.

which means that the above PHP code should work as advertised. Unfortunately, IE6 sends every button along with the form data, not just the “activated” one. This means that when using IE6, even if you click the “continue” button, the above code would run the “DoCancel” method.

I know, I’m about 6 years too late with this little snippet, but here’s the fix, using a little jQuery:

<!--[if lt IE 7]>
<script type="text/javascript">
(function() {
  function rmBtns(e) {
    e = e || window.event;
    $('button').not(e.target).remove();
  }

  function buttonFix() {
    $('button').click(rmBtns);
  }

  $(document).ready(buttonFix);
})();

</script>
< ![endif]-->

This entry was posted on Wednesday, June 16th, 2010 at 4:23 pm and is filed under Computers, Software Engineering, Web.