Menu
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.
396
Answer: Use the jQuery submit() Method You can use the submit() method to submit an HTML form (i.e. <form> ) using jQuery. The jQuery code in the following example will submit the form on click of the button (i.e. the <button> element) which has the type attribute set to button (i.e. type="button" ).
To begin with using jQuery with ASP.NET, first download the latest version the jQuery library from jQuery website and unzip or copy the file in your project or Visual studio solution. Microsoft Visual studio 2010 and 2012 include jQuery by default and provide intellisense to use jQuery.
jQuery submit() MethodThe submit event occurs when a form is submitted. This event can only be used on <form> elements. The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.
Thanks, @Ken Browning and @russau for pointing me in the direction of hijacking __doPostBack. I've seen a couple of different approaches to this:
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
131
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> Register your handler function within your codebehind i.e.
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
