30

How can I attach a click event to a button and prevent postback?

The code I have doesn't seem to be working.

$('#btnNext').click(function() {
        return false;
    });
Razor
  • 17,271
  • 25
  • 91
  • 138
  • See this: [How to remove an event handler](http://jquery.open2space.com/node/23) And This: [best way to remove an event handler in jquery?](http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery) – Amr Elgarhy May 20 '09 at 13:37
  • Good question but lacking a comparative example. Since web developers today, use a blended approach, it is always good to provide an example of the HTML control not just assume the type of the selector. – GoldBishop Feb 06 '17 at 18:29

4 Answers4

60
$('#btnNext').click(function(e) {
        e.preventDefault();
    });
  • 3
    I've noticed that this doesn't work either due to asp.net rendering. My button gets rendered with a "javascript:__doPostBack(". Any ideas on how to get rid of this? – Razor May 20 '09 at 14:20
  • Change the `$('#btnNext')` to this: `$('#<%=btnNext.ClientID%>')`. By default, ASP.Net uses their own ID naming... so by using the ClientID property, you can get the actual name to reference. – Eric Burdo May 19 '14 at 14:32
  • Adding to User434917's answer: Encosia has a good writeup on this [here](http://encosia.com/button-click-handlers-ajax-premature-submission/) - (Button click handlers, AJAX, and premature submission) – amorin May 21 '14 at 20:50
  • @VincePanuccio you can't get rid of that, since it is what allows non-Submit controls to perform PostBack behavior. Either ignore it or understand it and utilize it to perform PostBack's from the Client-Side. – GoldBishop Feb 06 '17 at 18:23
21

I was working with a button and discovered that if you want to prevent the button from doing an auto-postback, you need to specify the type as "button". For example:

<button id="saveButton">Save</button>

--this will generate an auto-postback (tested in IE)

<button type="button" id="saveButton">Save</button>

--this will not

Hope this helps someone.

Joe Werner
  • 211
  • 2
  • 2
  • 2
    Elegant, simple, and requires no js whatsoever. Not only did this solve my problem, but did so in a way that didn't bloat my codebase. Thanks! – Brian Swift Jul 10 '14 at 23:15
  • @JoeWerner problem is that some developers use the ASP controls instead of raw HTML. Some developers are lazy, i know. Either way this only works for those that use Raw HTML to build a webpage. – GoldBishop Feb 06 '17 at 18:25
4

In Asp.net to prevent page postback on button click use preventDefault() function

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>WebForm1</title>
        <script src="js/jquery-2.2.2.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#btnshow").click(function (e) {
                    e.preventDefault();
                    $("#Label1").show();
                });
                $("#btnhide").click(function (e) {
                    e.preventDefault();
                    $("#Label1").hide();
                })
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

        </div>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <asp:Button ID="btnshow" runat="server" Text="Show" />
            <asp:Button ID="btnhide" runat="server" Text="Hide" />
        </form>


    </body>
    </html>
Rae Lee
  • 1,321
  • 10
  • 11
  • This is probably the best practical approach, as it pertains directly to the .Net quandary. In some scenario's, you should also handle dynamic control ID assignment, pending on the environment. – GoldBishop Feb 06 '17 at 18:27
  • How does this differ from [the answer posted 7 years prior](https://stackoverflow.com/a/887938/215552)? – Heretic Monkey Oct 15 '22 at 19:59
-1

inside button tag, use type="Button" to prevent from post back.

Munish sharma
  • 1