Question

In a C#/ASP.NET application, I have a form that renders much like the following (plus a lot more, but this is what matters):

<form method="post" action="">
<input type="image" name="ctl15" src="cancel.gif" style="border-width:0px;" />
    <!-- Server side, the above input is a System.Web.UI.WebControls.ImageButton. -->
...more extra fluff...
<input type="submit" name="Button1" value="Proceed" id="Button1" class="button"
    style="width:59px;" />
</form>

This form works just fine in Internet Explorer and Firefox, but fails in WebKit-based browsers (Safari and Chrome). The problem is that when the user presses Enter when in an input field, rather than using the mouse to click on the submit button, the image input is activated (which in this case corresponds to a cancel event, exactly the opposite of the “proceed” action that is natural given the UI in question).

What I want to do is to, on an Enter keypress, activate the <input type="submit"> button instead of the <input type="image">, without breaking submission by clicking the image. How can I do that? Preferably in a cross-browser manner so I don’t need yet more special cases in the code.

No jQuery solutions, please, since this application doesn’t use it (and introducing a whole new library for such a “simple” thing is going to be a very hard sell) – stock JavaScript is perfectly fine, though. Obviously the best would be if it can be done in just HTML and CSS, but I have my doubts about the feasibility of that.

In essence, this question seems to me to be sort of the exact opposite of HTML: Submitting a form by pressing enter without a submit button.

Unfortunately, since the different parts of the UI are rendered by different classes and kept in separate .aspx files (specifically, the <input type="image"> is in one place, and the <input type="submit"> in quite another), reordering the elements in the generated HTML is not really a feasible solution either.

Answer 1

Pure JavaScript:

<script type="text/javascript">
var SUBMIT_BUTTON_ID = "Button1";
window.onload = function(event) {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        if (oCurInput.type == "text") {
            oCurInput.onkeypress = function(evt) {
                if (typeof evt == "undefined" || evt == null)
                    evt = window.event;
                var keyCode = evt.keyCode || evt.which;
                if (keyCode == 13) {
                    document.getElementById(SUBMIT_BUTTON_ID).click();
                    return false;
                }
                return true;
            }
        }
    }
}
</script>

Tested on IE8 and Chrome, better test on all browsers you think relevant before using it.

This code will handle all onkeypress events for all textboxes in the document and when ENTER key is pressed it will imitate click of the submit button and cancel further handling of the event to avoid conflicts.