65.9K
CodeProject is changing. Read more.
Home

HTML Wait-Confirm Button Server Control

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.50/5 (17 votes)

Jul 30, 2002

1 min read

viewsIcon

286572

downloadIcon

2074

An article showing a quick way to create a custom control that will prompt the user before submitting, and then will change the text of the button to "Please Wait.." and the mouse cursor will change to an hourglass.

Introduction

I'm providing the source code for a simple derived control that will add some useful functionality. Our goal is to make a submit button that prompts for confirmation before submitting, and if the user confirms then change the text on the button and change the mouse cursor to an hourglass. It has only been tested in Internet Explorer versions 5-6.

There are really only a few sections. The first thing needed is to create a compiled class file that will contain the instructions to write out the client side javascript, write out the html button, and modify the button to run the javascript when clicked.

The javascript we are going to be creating will look like this:

<script language="javascript">
<!--
function __doConfirm(btnWaiter) {
if (confirm("Save changes to database?")) {
 btnWaiter.setAttribute("value","Please Wait...");
 document.body.style.cursor="wait";
 return true;
} return false; }
-->
</script>

Our button will call this boolean function (return __doconfirm(this);) and only submit if it returns true.

Might as well get right to the code. Our class file will look like this, overriding the OnPreRender event to register the script and set the onclick attribute to call the client side function.

Public Class ConfirmWaitButton
    Inherits System.Web.UI.WebControls.Button

    Public _Message As String

    Public Property Message() As String
        Get
            Return _Message
        End Get
        Set(ByVal Value As String)
            _Message = Value
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
        Page.RegisterClientScriptBlock( _
         "__doAlert", _
         "<script language="" javascript"">" & vbCrLf & _
         "<!--" & vbCrLf & _
         "function __doConfirm(btnWaiter) {" & vbCrLf & _
         "if (confirm(""" & _Message & """)) {" & vbCrLf & _
         " btnWaiter.setAttribute(""value"",""Please Wait..."");" & vbCrLf & _
         " document.body.style.cursor=""wait"";" & vbCrLf & _
         " return true;" & vbCrLf & _
         "} return false; }" & vbCrLf & _
         "-->" & vbCrLf & _
         "</script>" _
        )

        Me.Attributes("onclick") = "return __doConfirm(this);"

        MyBase.OnPreRender(e)
    End Sub

End Class

And there it is! that's all it takes to create your own wait/confirm button. Add this as a class file to your VS.NET project and add one to a page like this:

<%@ Register TagPrefix="MG" Namespace="vbProject" Assembly="vbProject" %>

<MG:ConfirmWaitButton id="btnConfirmUpdate" runat="server" Text="Update" 
                         Message="Save changes to database?">
</MG:ConfirmWaitButton>

You will have access to all of the System.Web.UI.WebControls.Button's events, such as OnClick(). That's it!