Tuesday, April 10, 2012

ASP:Button OnClientClick and OnClick not working

Sometimes you face really strange scenarios in Development, I faced a very strange issue about Event handlers while development of simple application. It proves that its not always Developers fault for coding defects.

I was creating a Search module in our application where I want call OnClientClick event for validation and if the validation returns true then perform search on DataSource using OnClick event of the Search button.

I have created a JavaScript function for validation and called that method in OnClientClick event
function ValidateSearch()
{
    var flag = true;
    // JavaScript code for validation
    return flag;
}
following is the ASP.Net code for Search button.
<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="ValidateSearch()" />

With above code it should call ValidateSearch() method first on click of Search button and based on the return value, it should call the Server-Side event.

Everything is OK, but above code didn't work, [Don't give up in such cases] 
I tried some other alternative like...

1) <asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="javascript:return ValidateSearch();" />

2) <asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="return ValidateSearch();" />

but still no Success.

Solution:
We have to explicitly return the result after checking the functions return value. 

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="if (!ValidateSearch()) { return false;};" />

Hope this helps you.

18 comments:

  1. Perfect solution. Scoured stackoverflow and couldnt find one that worked but this did! Reblogged

    ReplyDelete
  2. Hey Hazelfresh, Only Developer can understand developer's need... I faced the same issue, hence added this solution in my blog. :)

    ReplyDelete
  3. I had the same issue with an ImageButton, the client click worked and even when the Javascript function returned true the OnClick event in the code behind would trigger only if I set CausesValidation="false"

    ReplyDelete
  4. Thanks...
    I faced the same issue...This blog helped me to find the solution.... :) Thanks...

    ReplyDelete
  5. Great! Thank you for posting this!

    ReplyDelete
  6. It is great solution, thank you!. But I cannot get the idea what is wrong if I have more controls on the page with Onclick and OnClientClick event.
    No one of them works then.

    ReplyDelete
  7. Hi, Thanks!! is there any reason why return Validate(); doesnt work?

    ReplyDelete
  8. Thank you for sharing this

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. I am also facing same issue , i have put UseSubmitBehaviour="false" & onClientClick i have added return then also onClick is not working .

    ReplyDelete
    Replies
    1. I was facing this issue. my onclick was not working. when I put both OnClientclick and UseSubmitBehaviour="false". if I used remove UseSubmitBehaviour="false", onclientclick impacted on my other code

      Delete
  12. worked like a charm.
    Thanks a bunch was stuck on this for some while now

    ReplyDelete
  13. thank you! it worked for me

    ReplyDelete
  14. I have the same issue, but this is not working for me.
    below is my javascript code,

    function ValidateNumber() {
    var flag = true;
    $('#btnValidate').prop("disabled", true);
    $('[id$=btnValidate]').val('Wait');
    setTimeout(function () {
    // do nothing
    }, 5000);
    return flag;
    }

    ReplyDelete
  15. What a great answer. It helped me a lot. A bundle of thanks

    ReplyDelete