postback fires even after returning false from OnClientClick

Question

I need to Stop Button1_Click fire after Jquery function return false..This is my Code ...

<%@ Page Language="C#" %>

<!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 id="Head1" runat="server">
    <script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
    <script src="Scripts/a.js" type="text/javascript"></script>
    <script runat="server">

        protected void Button1_Click(object sender, EventArgs e)
        {

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return x();"  OnClick="Button1_Click" />
            OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

js File

function x() {

    alert('');

    return false;
}

this is my HTML generated File

<!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 id="Head1">
    <script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
    <script src="Scripts/a.js" type="text/javascript"></script>
    <title>

</title></head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNTM0OTE4ODNkZI8CSkltDp/afauc6DGl2D8JvNnVI1ffgzykF0L2alVM" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAOSROoMi8eHXeBzZ77oKwMrESCFkFW/RuhzY1oLb/NUVM34O/GfAV4V4n0wgFZHr3eJjGQabRwzK4TIMzE2tX2gN9468Yg/u6i/oj/9EvNo1w==" />
</div>
    <div>
        <input name="TextBox1" type="text" id="TextBox1" />
        <input type="submit" name="Button1" value="Button" onclick="return x();" id="Button1" />
    </div>
    </form>
</body>
</html>

I also tried Similar links :

Why doesn't returning false from OnClientClick cancel the postback

In this case a handler for the one more click event was registered via jquery ..I think it is not in my case

ASP.NET OnClientClick="return false;" doesn't work

there should not be a click event handler (registered via jquery) which returns true .whats mean by that ?Does it mean that i need to remove onClick function ... i dont wanna do it

I also tried other suggested Code :

<asp:Button ID="Button1" runat="server" Text="Button"  OnClientClick="if (!x()) return     
false;"  OnClick="Button1_Click" /> 

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return        
x();"OnClick="Button1_Click" />

they are also not working

Plese suggest

Can you post the generated HTML source? – Dror May 01 '14 at 06:06 — Dror, May 01 '14 at 06:06
Please show `JS` code for function `X` ?? – Mayank Pathak May 01 '14 at 06:09 — Mayank Pathak, May 01 '14 at 06:09

score 3 · Accepted Answer · edited May 23 '17 at 11:46

This worked for me...
.aspx page

<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
<script type="text/javascript">
   function x() {
      return false;
   }
</script>

Reference Help

Update from an external javascript file working code
external.js

function x() {
    var result = confirm("Sure");
    if (result)
        return true;
    else
        return false;
}

.aspx page

<form id="form1" runat="server">
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
</form>
<script src="external.js" type="text/javascript"></script>

Hope it helps..!!

Yup...It also worked for me for inline Script .. Still thinking why not working for External js file .. anyway thanks — user3487944, May 01 '14 at 07:25

score 1 · Answer 2 · answered Feb 09 '16 at 15:11

You can also put all the code in single file. Attaching handler directly from jQuery

        jQuery(document).ready(function () {
            AttachDeleteButtonHandler();
        });

        function AttachDeleteButtonHandler() {
            var btnDelete = $("div[class='page']").find("table[id$='tblButtons']").find("input[id$='btnDelete']");
            btnDelete.click(
                function () {
                    return ConfirmDelete();
                }
            );
        }

        function ConfirmDelete() {
            var msg = $('div[id="hdnElements"]').find('span[onclick*="translatedMsgText"]').text();
            if (confirm(msg)) {
                return true;
            }
            else {
                return false;
            }
        }

postback fires even after returning false from OnClientClick

2 Answers2