the button element and IE

aka things I learnt this week part 1

A feature of IE I did not know existed till reading the comments on Aaron Gustafson’s Push My Button at Digital Web Magazine was that when a button is submitted in a form, all other browser submit the value you assigned, except IE which submits the innertext.

For example:

<button type="submit"value="X">Y</button >

So if the button is submitted in a form, from IE users you will get Y and from everybody else you get X. I am sure some people could find great use for this behaviour, but for most people it is just a nuisance.

Contrary to the comments on the push my button article you can change the innertext value submitted by IE but that requires javascript. So unless your form relies on javascript, you risk the chance of a form being submitted incorrectly by an IE user with javascript turned off.

Still this IE idiosyncrasy can be avoid by either using the same details in value and the innertext or ignoring the details provided by the button. Using <button type=”button”> to trigger javascript is not affect by this problem.

4 Responses to “the button element and IE”

  1. Hmark Says:

    Also, if you have more than one button element in a form, all of them will be submitted with the form, not just the one that the user clicked.

  2. Forget input type=submit - use a button! » zombiecoder kay: best practices web development Says:

    […] So, next time you build a form, try throwing in a button instead of an input type=submit. But be a little careful, because they are not completely without idiosyncracies. Nick recently reported that IE gets things a little backwards sometimes (typical!). […]

  3. kay lives here » Blog Archive » How good markup makes your life easier Says:

    […] Of course, there are things you need to know before you use the element. Nick reports that IE gets things a little backwards when passing the value of the button. But you have a similar issue with <input type=”image”> so it’s really just a case of being aware of the problem. […]

  4. J Says:

    glad you took the time to post this