How to capture submit event using jQuery in an ASP.NET application?

问题

I\'m trying to handle the submit event of a form element using jQuery.

    $(\"form\").bind(\"submit\", function() {
        alert(\"You are submitting!\");
    });

This never fires when the form submits (as part of a postback, e.g. when I click on a button or linkbutton).

Is there a way to make this work? I could attach to events of the individual elements that trigger the submission, but that\'s less than ideal - there are just too many possibilities (e.g. dropdownlists with autopostback=true, keyboard shortcuts, etc.)

Update: Here\'s a minimal test case - this is the entire contents of my aspx page:

<%@ page language=\"vb\" autoeventwireup=\"false\" %>

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head runat=\"server\">
    <title></title>
</head>
<body>
    <form id=\"form1\" runat=\"server\">
        <div>
            <asp:scriptmanager id=\"ScriptManager\" runat=\"server\" enablepartialrendering=\"true\">
                <scripts>
                    <asp:scriptreference path=\"/Standard/Core/Javascript/Jquery.min.js\" />
                </scripts>
            </asp:scriptmanager>
            <p>
                <asp:linkbutton id=\"TestButton\" text=\"Click me!\" runat=\"server\" /></p>
        </div>
    </form>

    <script type=\"text/javascript\">
        $(document).ready(function() {
            alert(\"Document ready.\");
            $(\"form\").submit(function() {
                alert(\"Submit detected.\");
            });
        });
    </script>

</body>
</html>

I get the \"Document ready\" alert, but not the \"Submit detected\" when clicking on the linkbutton.

回答1:

Thanks, @Ken Browning and @russau for pointing me in the direction of hijacking __doPostBack. I've seen a couple of different approaches to this:

Hard-code my own version of __doPostBack, and put it later on the page so that it overwrites the standard one.
Overload Render on the page and inject my own custom code into the existing __doPostBack.
Take advantage of Javascript's functional nature and create a hook for adding functionality to __doPostBack.

The first two seem undesirable for a couple of reasons (for example, suppose in the future someone else needs to add their own functionality to __doPostBack) so I've gone with #3.

This addToPostBack function is a variation of a common pre-jQuery technique I used to use to add functions to window.onload, and it works well:

addToPostBack = function(func) {
    var old__doPostBack = __doPostBack;
    if (typeof __doPostBack != 'function') {
        __doPostBack = func;
    } else {
        __doPostBack = function(t, a) {
            if (func(t, a)) old__doPostBack(t, a);
        }
    }
};

$(document).ready(function() {
    alert("Document ready.");
    addToPostBack(function(t,a) {
        return confirm("Really?")
    });
});

Edit: Changed addToPostBack so that

it can take the same arguments as __doPostBack
the function being added takes place before __doPostBack
the function being added can return false to abort postback

回答2:

I've had success with a solution with overriding __doPostBack() so as to call an override on form.submit() (i.e. $('form:first').submit(myHandler)), but I think it's over-engineered. As of ASP.NET 2.0, the most simple workaround is to:

Define a javascript function that you want to run when the form is submitted i.e.

<script type="text/javascript">

function myhandler()
{
    alert('you submitted!');
}

</script>

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    ScriptManager.RegisterOnSubmitStatement(Page, Page.GetType(), 
                                            "myHandlerKey", "myhandler()");
}

That's all! myhandler() will be called from straightforward button-input submits and automatic __doPostBack() calls alike.

回答3:

Yeah, this is annoying. I replace __doPostBack with my own so that I could get submit events to fire.

Iirc, this is an issue when submitting a form via javascript (which calls to __doPostBack do) in IE (maybe other browsers too).

My __doPostBack replacement calls $(theForm).submit() after replicating the default behavior (stuffing values in hidden inputs)

回答4:

I don't know how to do it with jQuery, but you could add an OnClientClick property to the ASP.NET control:

<asp:linkbutton id="TestButton" text="Click me!" runat="server" OnClientClick="alert('Submit detected.');" />

回答5:

If you are using .NET Framework 3.5 or up, you can use ScriptManager.RegisterOnSubmitStatement() in your server-side code. The registered script will get called both on normal submit and on DoPostback.

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "myKey", "SomeClientSideFunction();");

回答6:

This works for capturing the submit:

$("form input[type=submit]").live("click", function(ev) {
    ev.preventDefault();
    console.log("Form submittion triggered");
  });

回答7:

 $(document).ready(function () {

          $(this).live("submit", function () {

                console.log("submitted");
             }
}

回答8:

You need to add OnclientClick to linkbutton

OnClientClick="if(!$('#form1').valid()) return false;"

来源：https://stackoverflow.com/questions/1230573/how-to-capture-submit-event-using-jquery-in-an-asp-net-application

标签

ASP.NET

jquery

webforms

form-submit