Fix ASP.Net form submit behavior with jQuery

writer.WriteLine("<div class=\"regular_forms\">");

writer.WriteLine("<fieldset class=\"clearfix\" defaultsubmitbutton=\"{0}\">", btnSearch.ClientID);

……… form contents ………

writer.WriteLine("</fieldset></div>");

The control “btnSearch” is the one we want to trigger when a user presses the enter button.

To hook up the button to the form we use the following JavaScript/jQuery:

$(document).ready(function() {
    $("fieldset[defaultsubmitbutton]").each(function() {
        var submitbuttonid = $(this).attr("defaultsubmitbutton");
        $("input[type='text'], input[type='password']", this).keydown(function(e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
                e.preventDefault();
                var button = $("#" + submitbuttonid).eq(0);
                if (button.length > 0) {
                    if (typeof (button.get(0).onclick) == 'function') {
                        button.trigger('click');
                    }
                    else if (button.attr('href')) {
                        window.location = button.attr('href'); } else {
                        button.trigger('click');
                    }
                }
            }
        });
    });
});

This script finds all fieldset elements containing the defaultsubmitbutton attribute, locates all textboxes and password fields within that fieldset and hooks up the keydown event.
When the enter key is pressed (keycode 13) the default event is canceled and depending on the type of button the right postback method is triggered.

Bookmark to:

Related posts:

1. Building an AJAX web part with jQuery (Part 2)
2. Building an AJAX web part with jQuery (Part 3)
3. InfoPath Form Template stays in “installing” state
4. Using a template plugin for jQuery to parse JSON data
5. What ASP.Net developers should know about jQuery