Client Side OnClick Confirm Popup Plus Mouse Over Action in ASP.NET

Objective: This article describes how to add a client side confirm popup window to your buttons.

Background: The confirm window is an essential element often required on submission forms. It provides a last warning to the user before executing a particular code. When the submit button is pressed by the user, a warning window pops up with the option to go ahead (OK) or to cancel. It is a very simple client side Javascript that can be use in many different ways and in many different situations.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

1. Drag and drop an asp:button onto your page from the Standard tab of your toolbox.
2. In the properties manager window find the the OnClientClick property under the Behaviors section.
3. Copy and paste the following short Javascript in there:
   return confirm(‘Are you sure?’);

4. As you can see, the message above will be “Are you sure?” You can change this to whatever you want your message to be.
5. Now let’s go into code view and set a couple of other properties for this button to create a mouse over action as well. Add the following code to your button:
   onmouseover=”this.value=’Click Here!’”
   onmouseout=”this.value=’Submit’”

6. Your final code for the button should look like the following:

   <!-- Button with clientside confirm -->
   <asp:Button ID="Button1" runat="server"
    OnClientClick="return confirm('Are you sure?');"
    onmouseover="this.value='Click Here!'"
    onmouseout="this.value='Submit'"
    Text="Submit"/>

7. That’s it! Enjoy.
8. and the final result…