Button onClick and onClientClick

Today I got a comment regarding what is the difference between onClick and onClientClick. So I think to write a small article on it.

Please find the following code for. I write the code for .aspx page. Copy and paste this code in your aspx page.

========================================================================================

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Untitled Page</title>
<script language=”javascript” type=”text/javascript”>
function confirmthis()
{
if(confirm(“Do you want to do a server trip?”))
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<asp:Button ID=”Button1″ runat=”server” OnClick=”Button1_Click” OnClientClick=”return confirmthis();” Text=”Click Me…” /></div>
</form>
</body>
</html>

========================================================================================

Copy and paste following code in your code behind(aspx.cs) page.

========================================================================================

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text=”U click Button1″
}

========================================================================================

Now run your project. just Click on the button “Click Me…”. It will ask to “Do you want to do a server trip?”. If you select YES then you will do a server trip and when you select NO you will not redirect to server. So here for validation purpose we are using onClientClick and for doing process on server side, we are using onClick.
Best Regards,
Vijay Modi

About these ads

About Vijay Modi

Having 10+ years of experience in web application development. Expertise in various domains like E-Commerce, E-Learning, Insurance. I have expertise in web application development, window application development, Performance improvement, bug fixing etc. I am believing in quality work and achieving deadlines. Also like to work on new technologies and quick learner.
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

36 Responses to Button onClick and onClientClick

  1. Johan says:

    How would you do this then:

    When user clicks the button it should immediately get disabled (prevent anymore clicking) then call a serverside function (buttonclick event)???

    On the lines of

    Is there a way of getting this to work at all?

    Jscript only does:
    form[0].Button1.disabled = true;

  2. Johan says:

    asp:button id=”Button1″ runat=”server” OnClientClick=”return confirm(‘Ok to post?’)” onclick=”btnOk_Click” Text=”Click!”

  3. cramossan says:

    I have been loosing my precious time for more than 5 hours looking for a “good” answer to a problem related to this issue. I have just solved it. Thanks.

  4. Vijay Modi says:

    I think you got your answer. Let me know if you have any issue.

  5. Kieran says:

    Thank you Vijay your sample code and great explanation helped me a lot.

    I am at present studying Website Design, I think
    I will bookmark your page for future reference.

    Thanks again,

    Kieran

  6. Brian says:

    Thanks Vijay, this worked perfectly!

  7. falak says:

    Thanks a lot yaar really I am very new for asp.net and after spending 4 hours I got your blog whcih helped me a lot

    Thanks again Vijay and Happy Diwali

  8. abhishekgupta says:

    thanks vijay.

  9. meghana says:

    hi , I am using the one text box and one image button control for a Caleder to select the dates. user can select the dates by typing directly in the text bob or By selecting the calender control. we have a validations for the date selection, i wrote a java script funtion for validating dates.

    So here my problem is i am not able to assign the validation java script funtion to the image button throught the ‘onclientclick’ event.

    here is my code

    but here it does not allowing me to put the onclient event. Please tell me how can i assign the javascript funtion to image button.

    i tried this way also,

    Can you please tell me how to i validate the image button??

    thanks
    meghana

  10. Pingback: OnClientClick vs OnClick / ASP.NET 2.0 | JAMSLUG: Tecnologías de Información

  11. Collin says:

    Hello,

    How to pass a parameter in a CSS popup? Let’s say I want to pass querystring from a link on the same page?

    Thanks in advance

  12. Gyozo says:

    Thanks Vijay, it was useful.

  13. Ibrahim says:

    Thanks Vijay,

    However I had a problem. When I used it on my page, the message keeps popping up at every postback, even for those postbacks that are not as a result of my button click. My page inherits from a master page. I added your script at the top of the Content Place Holder.

    How do I go about this? Thanks

  14. Aida says:

    Thanks for the posting,

    but i have a problem:
    after this line in onClientClick :

    submitbutton.disabled = true;
    return true;

    OnClick event doesn’t run…

    if i comment
    submitbutton.disabled = true;

    OnClick event runs fine..

    any idea?

    thanks

  15. adry says:

    Hi, thanks 4 the post Aida, i am at work ,stressed outand stuff and i laughed a little when i saw this post.
    Have a nice day everyone!

  16. venu says:

    Hi,

    i have one button control in my home page, this button control returns value from database like totalpages

    my requirement is how to use toatalpages variable in onclientclick of button control.

    • Vijay Modi says:

      You can store that variables value in Viewstate, Session, Cache. But you want to use this variables value onclientclick. So for this you can use hiddentext control and assign that retrieved value(totalpages) to this hiddentext control. It will resolve your issue.

      Regards,
      Vijay Modi

  17. JoakimAnandh says:

    Hi Vijay,
    Thanks 4 ur post.I spending 3 hours to got this

    Regards
    JoakimAnandh

  18. anita says:

    thankx vijay bt can you please describe the difference in a more detailed way

    • Vijay Modi says:

      onClientClick event is fired on Client side before postback the page to server.
      While OnClick event is fired on Server side.
      Developers are using onClientClick to set the validations before sending page to server.

  19. anita says:

    Can we start a new topic?A question was asked to me that while we are using master pages which one is better to use response.redirect or server.transfer and why?I was bit confused as I knew the answer is response.redirect,coz the page must be rendered with the specific master page it is referring. But i need a detailed answer.

  20. Lookz says:

    Helloo
    I am devoloping an online application which wants the use of date pickers and other input conyrols. when i want to call them the webpage will do a needless server round trip. what should I do to avoid that round trip?
    I will be very thankful to you if u answer my query at ur earliest.

    Regards

    Lukmanul Hakim
    lukmandaze@gmail.com

  21. Rabeek Ahamed says:

    Hi,
    I have Onclientclick event attached to the button in serverside code like below,

    TopPanelButton.OnClientClick = string.Format(“if(!ValidData({0},{1},{2},{3})) return false;”, txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

    Also, the onClick event is attached for the same button in the aspx page,

    The serverside click event should fire if the onclientclick return true. The “ValidateData()” function is called to validate the entries in the form.

    This code is working fine in IE. But in Firefox, both events are not firing. If I comment the “TopPanelButton.OnClientClick =…” code then onClick event is firing.

    Please help me to resolve this. Thanks in advance.

  22. Pawan says:

    hi vijay i am using master page where asp:button server control fires onClientClick, but in some scenario where my content page having asp:button, this control’s onclientclick is invokes the master page onclentclick event??

  23. Thnx buddy or your post…

  24. sarama das says:

    cant understand.pls differentsieate onclientclick and clienclick.pls send it at my mail

  25. you can more optimize your js code as

    function confirmthis()
    {
    return confirm(‘Do you want to do a server trip?’);
    }

    this will work the same as you did… :)

  26. you can more optimize your js code as follows.

    function confirmthis()
    {
    confirm(‘Do you want to do a server trip?’);
    }

    this is also work exact as yours… :)

  27. Anitha says:

    am using the javascript code to open a popup page when i clicked on a button in aspx page. How can i write the onclientclick function in javascript to disable and change the color of page containing button on page popup and enable the page when popup disappears… can u plz help me………

    Thanks in advance.

  28. Pingback: Once again ... Disable Button Onclick | ASP Questions & Answers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s