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” >
<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
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;
asp:button id=”Button1″ runat=”server” OnClientClick=”return confirm(‘Ok to post?’)” onclick=”btnOk_Click” Text=”Click!”
It should be – onclientclick=” return confirm(‘ok to post’) ;
Dont forget to put semi-colon pls
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.
I think you got your answer. Let me know if you have any issue.
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
Thanks Vijay, this worked perfectly!
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
thanks vijay.
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
Pingback: OnClientClick vs OnClick / ASP.NET 2.0 | JAMSLUG: Tecnologías de Información
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
Thanks Vijay, it was useful.
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
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
Hello Aida, you found the solution to your problem?
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!
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.
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
Hi Vijay,
Thanks 4 ur post.I spending 3 hours to got this
Regards
JoakimAnandh
thankx vijay bt can you please describe the difference in a more detailed way
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.
Thnkx now it is clear to me
I don’t know why is it happing but my onclientclick is executing after onclick,any solution for this problem…
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.
Sorry, little bit busy today. Will reply here shorty.
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
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.
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??
Thnx buddy or your post…
cant understand.pls differentsieate onclientclick and clienclick.pls send it at my mail
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…
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…
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.
Thanks