Dynamically Creating Client-Side Script for Form Deletion Confirmations

To Learn More...
To learn more about both client-side and server-side form validation be sure to check out the Form Validation Article Index. - continued - This article presents its code using VBScript, which will only work in IE. For a JavaScript implementation, which will work in both Netsacpe and IE, be sure to read: JavaScript Confirm Form Submission!

Introduction
During a recent visit to the ASPFAQs.com site I came across a question that someone had asked: "How can I pop up a message from ASP? An alert box, when something goes wrong. A 'confirm' dialog showing details of a record to make sure the user really wants to delete the record?". The response given to the question seemed to suggest that this was something that could not be achieved because the MsgBox command is not available with server-side scripting. Whilst this is true, it is somewhat of an over simplification since we can use Active Server Pages to dynamically write necessary client-side scripting into the client.

In this short article we are going to primarily look at what was asked in the original question: simply, can we confirm the deletion of a database record using a popup message box? The concepts behind this, namely dynamically generating client side scripting, provide an opportunity to greatly increase the interactivity with the visitor.

The Problem Using Pure Server-Side ASP
Because the server-side ASP is executed before being sent to the client, a MsgBox function were it available would actually display the pop-up on the server. Not very useful and likely to annoy some poor sysadmin somewhere!

Add a Dash Of Client Side Scripting
Lets step back for a moment and look at what we are trying to acheive in broader terms. The fact that we are confirming the deletion of a database record is not important at this stage; what we are really saying is that we want to provide a means of confirming a form submission even after the submit button has been pressed. Our first suggestion over how we can do this comes from the OnSubmit event of the form. Lets look at a basic form:

<SCRIPT LANGUAGE="VBScript"> Function MyForm_onSubmit MsgBox "Form was clicked" End Function </SCRIPT> <FORM METHOD="POST" ACTION="mypage.asp" NAME="MyForm"> <INPUT TYPE="SUBMIT" NAME="btnSUBMIT" VALUE="Click Here"> </FORM>

When the above form is submitted a pop-up message will appear which when clicked will cause the form to redirect to script mypage.asp. Note that the above code snippet will only work in Internet Explorer since it uses VBScript as a client-side scripting language. To work in Netscape, the client-side SCRIPT block would need to be coded in JavaScript. (For more information on client-side JavaScript be sure to check out our JavaScript Tutorials Index Page.) On a browser that doesn’t happen to support any scripting (or doesn't support VBScript), it will continue to process the form regardless, omitting the popup message.

We can see from the above that using the onSubmit as above we can implement a number of client side options when the form is fired such as form validations. This just leaves us with one issue. Can we abort the submission of a form if a certain condition has not been met? The onSubmit event when enclosed within a function can be assigned a Boolean value which by setting to false causes the form submission to be cancelled. Lets look at a simple example the uses this:

<SCRIPT LANGUAGE="VBScript"> Function MyForm_onSubmit If Msgbox("Are you sure?", vbYesNo + vbExclamation) = vbNo Then MyForm_onSubmit = False End If End Function </SCRIPT> <FORM METHOD="POST" ACTION="http://www.microsoft.com" NAME="MyForm"> <INPUT TYPE="SUBMIT" NAME="btnSUBMIT" VALUE="Click Here to go to Microsoft.Com"> </FORM>

This form confirms the redirection to a form script (in this case a site). Note that we don’t need to say MyForm_onSubmit = True since this will be assumed.

Its not quite as simple however when we return to our original problem. When allowing a user to confirm the deletion of a specific record, we may have more than one record showing on the page. In this instance we need to dynamically generate our client side function we looked at above to allow us to have more than one form and corresponding function.

Lets look at a simple ASP form template that allows for the deleting of records with confirming (you can also download a demo ASP page and database for this script!):

<% Set Conn=Server.CreateObject("ADODB.Connection") Conn.Open DataSourceName If Len(Request.Form("Delete") ) > 0 Then IDOfItem=Request.Form("ID") Conn.Execute ("DELETE FROM TableName WHERE ID=" & IDOfItem) End If Set GetAll=Conn.Execute("SELECT ID, Name FROM TableName") Do Until GetAll.EOF ItemID = GetAll("ID") 'Store the ID of the current item Response.Write GetAll("Name") 'Output the name 'Create a form with a dynamic NAME and a DELETE BUTTON Response.Write "<FORM METHOD=""POST"" ACTION=""thispage.asp""" & _ "NAME=""Delete" & ItemID & """>" Response.Write "<INPUT TYPE=""HIDDEN"" NAME=""ID"" VALUE=""" & _ ItemID & """>" & vbCrLf Response.Write "<INPUT TYPE=""SUBMIT"" NAME=""Delete"" " & _ "VALUE=""Delete"">" & vbCrLf Response.Write "</FORM>" & vbCrLf & vbCrLf 'Create a client-side script block to handle this form's onSubmit Response.Write "<SCRIPT LANGUAGE=""VBScript"">" & vbCrLf Response.Write "Function Delete" & ItemID & "_onSubmit" & vbCrLf Response.Write "If MsgBox(""Are You Sure"", vbYesNo + " & _ "vbExclamation) = vbNo Then Delete" & _ ItemID & "_onSubmit=False" & vbCrLf Response.Write "End Function" & vbCrLf Response.Write "</SCRIPT>" & vbCrLf Response.Write "<BR><BR>" & vbCrLf & vbCrLf GetAll.MoveNext Loop

What we have done is enclosed each delete button within its own unique form where the form name is based on the ID (Primary Key) of the database field. We have then added a simple client side function which provides a confirmation of this delete. When confirmation is accepted, the asp code at the top of the page will delete the required entry.

Conclusion
Our examples here will only work on Internet Explorer since we used VBScript on the client. JavaScript however can be equally used (for an example of this check out Nannette Thacker's article: JavaScript Confirm Form Submissions). Where scripting is unsupported, the code will continue to work but without the confirmation. I hope that this article gives you an introduction to how adding a little client scripting can be used to make your pages a little more interesting.