Multiple image submit buttons and IE

Ran into an interesting problem with Internet Explorer today. I had a simple form for adding and removing people using nice + and - graphics as the submit images.:

<form action="add_remove_user" method="post">
    <input type="text" name="username" value="" />
    <input type="image" alt="add" src="add.png"
        name="action" value="add" />
    <input type="image" alt="remove" src="delete.png"
        name="action" value="remove" />
</form>

Nothing too exciting there, however I was getting some odd results from IE:

1. If you clicked on one of the images then you got "action.x" and "action.y" but no actual action value.
2. If you hit enter then the action field wasn't present.

The first problem I couldn't figure out, so rather than mess around with javascript or other hacks I just changed the buttons back to plain submit ones.

The second problem still persisted, and it turns out you need a fake input field (see this article for more detail). So having stuck in my fake field you can hit enter and click the buttons.:

<form action="add_remove_user" method="post">
    <input type="text" name="username" value="" />
    <input type="text" name="fake" class="fakefield" value="" />
    <input type="submit" name="action" value="add" />
    <input type="submit" name="action" value="remove" />
</form>

I'm not entirely happy with either solution, but IE has ground me down to the point where I just want to fix a problem and move on, avoiding javascript fixes where I can (since javascript on IE introduces a whole new set of problems).

Comments