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

Question

I just want to add some client side (JQuery Javascript) validation in a web user control. I put an OnClientClick handler and the function gets called. BUT, even if I return "false", the OnClick method always get fired. What am I doing wrong ?

I'm with VS 2010, targeting the 4.0 framework with JQuery 1.4.2. and JQuery UI 1.8.4.

Here's a sample code :

<td style="text-align:right"><asp:Button ID="btnAddSave" OnClientClick="return ValidateMail();" OnClick="btnAddSave_Click" runat="server" Text="Submit" /></td>

Script method :

function ValidateMail() {
alert("Bouton clicked");
return false;

}

If I put a breakpoint in the Page_Load event, I see that I get in and the btnAddSave_Click event is also executed.

Answer 1

for some reason, although I didn't have any jquery event handlers attached, it didn't work.

What actually worked was:

OnClientClick="if (validate_form() == false) return(false);"

Answer 2

Do you have a click event handler (registered via jquery) which returns true? In that case, the return value of OnClientClick is ignored.

Have a look at my question (and answer): Why doesn't returning false from OnClientClick cancel the postback

Answer 3

Try changing it to

OnClientClick="ValidateMail(); return false;" 

Answer 4

Great answers. I do it this way. Same result- the OnClick event is not fired off if false is returned from Java function.

OnClientClick = "if (!ValidateDelete()) return false;"
OnClick="btnDeleteSupplier_Click"

Answer 5

oddly enough this worked for me:

OnClientClick="javascript:SubmitTableData(); return CanSubmit();"

set the return value submit with the first function call:

function CanSubmit() {    
    return submit;
}

Hope this helps someone.

Answer 6

I'm writing this answer only because I'm using html buttons with ASP.NET WebForms and I couldn't find solution why should I replace my piece of code with working examples. Here is solution why it is not working. Hope it will help you to understand the issue like checking it helped me. This is my first post, so sorry for style.

<button type="button" id="buttonAddOrEdit" class="btn btn-success"  runat="server" onclick="return myValidate()"    onserverclick="buttonAddOrEdit_ServerClick">Zapisz</button>

And javascript function:

function myValidation() {
        if (validator.form()) {
           //Project logic
            return true;
        }
        else return false;
    };

Using client side click after correct validation wasn't triggering event on server side that was binded to button. Solution mentioned to change piece of code to:

onclick="if(!myValidation()) return;"

Works because of way that html rendered on page with onserverclick is created. Onserverclick on html button is being replaced by __doPostBack method from javascript. Fullcode of html button rendered on client side looks this way:

<button onclick="return myValidation(); __doPostBack('ctl00$PortalContent$buttonAddOrEdit','')" id="ctl00_PortalContent_buttonAddOrEdit" type="button" class="btn btn-success">Zapisz</button>  Błąd składni

And after replacing it with if statment.

<button onclick="if(!myValidation()) return; __doPostBack('ctl00$PortalContent$buttonAddOrEdit','')" id="ctl00_PortalContent_buttonAddOrEdit" type="button" class="btn btn-success">Zapisz</button>

Working with return myValidate(); won't tirgger event because it returns before __doPostBack.

Following code will allow you to add some another code to button if neccessary and won't cause any issues.

Answer 7

Just add javascript:

Example:

javascript:return ValidateMail();