How to prevent ASP:Button from posting back from a jQuery click handler

Question

I have an ASP:Button on a page. It renders as HTML like so:

<input type="submit" name="myButton" value="Do something" 
    onclick="javascript:WebForm_DoPostBackWithOptions(
        new WebForm_PostBackOptions('myButton', '', true, '', '', false, false))"
    id="myButton" />

Now I am trying to prevent the default behavior of this button (submitting the form) via a jQuery event handler:

$('#myButton').click(function () { 
    // do some client-side stuff

    if (someCondition) {
        // don't postback!
        return false;
    }
});

The problem here is that the inline click handler that ASP sticks on the input seems to be executing before the jQuery event handler, every time.

The easiest solution here would be to use a plain input type="button" instead of an ASP:Button, unfortunately this is not a possibilty as this ASP:Button does many other things that are required in this scenario.

What would be the best way to prevent the form submission from happening? I've thought of using string manipulation to prepend my handler on the element's onclick attribute, but this seems really dirty. I'd also like to avoid using the OnClientClick as this would require my handler function to be publicly exposed. Is there a better way?

when you bind event handlers, they are called in the order in which they were bound, so it'll call the inline one first, then your handler. About all I can think of is to unbind the default, bind yours, then rebind the original one — MrOBrian, Aug 09 '12 at 20:25

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

Have you tried adding OnClientClick="return false;" attribute to your aspx button control?

No worries check out this post it provides a javascript event unloader script: Is it possible to remove all event handlers of a given element in javascript?

I think youre interested in the last method DomLib.prototype.removeEventsByTypeEx

edited May 23 '17 at 12:14

Community

1
1

answered Aug 09 '12 at 20:20

Luke Baughan

4,658
3
31
54

i'd like to avoid making my handler function public so this would be a last resort; i've updated my question to include this. – jbabey Aug 09 '12 at 20:21

score 0 · Accepted Answer · answered Aug 10 '12 at 00:21

I just found a way

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        var ploopButton = null;
        $("#ploop").click(function (e) {
            ploopButton = this;
        });
        $("#form1").submit(function (e) {
            if (ploopButton !== null) {
                ploopButton = null;
                return confirm('are u sure?');
            }
            return true;
        });
    });
</script>
<form id="form1" runat="server">
    <asp:Button ID="ploop" Text="ploop" runat="server" OnClick="ploop_Click" />
</form>

Basically you would use a global flag indicating which button was clicked, and you would confirm the form submit when the flag is turned on

i hadn't thought of this. i'll try it out and see how it looks. — jbabey, Aug 10 '12 at 13:40

How to prevent ASP:Button from posting back from a jQuery click handler

2 Answers2