Hardware

How do I... Warn a user before they submit a form or follow a link on an HTML page?

Ever have an instance where you wanted to warn a user that they were about to delete a record or submit a form on a Web page? Zach Smith shows you how to use simple JavaScript statements to warn users of their actions -- before they go too far.

Ever had an instance in your application development career where it would be nice to be able to warn a user that they are about to perform some action on a Web page, and give them the chance to cancel that action before it happens?

For example, say the user is about to click a link that will delete a record -- you want to warn them and allow them to cancel the action if they decide the record should remain. Another example is when a user clicks a link that is going to take them to another site that is not under your control. This type of functionality is actually required in some instances, especially with sites that deal with personal information.

Here is how you implement this type of functionality -- in pure HTML and JavaScript. I won't use any fancy IDE -- you'll be able to reproduce this with nothing more than a text editor and Internet Explorer.

This blog post is also available in PDF form in a TechRepublic download.

The OnClick event

The OnClick event is fired when a user clicks their mouse pointer on a link, form button, DIV, etc... This event allows you to capture the mouse click, run some logic, and then you can either cancel the event or allow it to continue.

Cancelling the event makes it appear as though the user never clicked their mouse. For instance, if we wanted the user to see a link, but disable its "clickability", we would write the code in Listing A.

Listing A

<a href="http://techrepublic.com" OnClick="return false;">Click here</a>

This link will look like any normal link to the user, but will be disabled. The reason for this is that we have attached "return false;" to the OnClick event -- this instructs the event to cancel itself.

Instead of just putting "return false;" in the OnClick event you can also attach the event to a function. This allows you to run complex logic to determine whether or not the event should be allowed to continue. The code in Listing B is an example of this.

Listing B

<a href="http://techrepublic.com" OnClick="return false;">Click here</a>

<script language="JavaScript">

function ExampleFunction()

{

if(1/2 > 2)

return true;

else

return false;

}

</script>

This function will of course always return false, but this demonstrates that a function can indeed be attached to the OnClick event. The function can run any logic that you need it to (i.e. check other page attributes such as form fields), this includes confirming with the user that the action they are about to perform is indeed their intended action.

Confirming user actions

Within JavaScript there is a function called, simply, "confirm". This function is designed to display a certain string of text, and provides two buttons -- "OK" and "Cancel" -- for the user to choose from. When you combine this function with the OnClick method you are able to confirm with the user that they are about to perform an action -- whether that action is deleting a record or simply submitting a form.

The code in Listing C shows how to use the confirm function with a simple hyperlink.

Listing C

<a href="http://techrepublic.com"

OnClick="return ConfirmSiteLeave();">Click here</a>

<script language="JavaScript">

function ConfirmSiteLeave(toUrl)

{

if(confirm("You are about to visit an external site that.nn"

+"Click OK to continue or Cancel to abort."))

return true;

else

return false;

}

</script>
As you can see this code uses a function to handle the logic -- but you don't have to do it that way. Listing D is another example that uses the confirm function inline with the hyperlink.

Listing D

<a href="http://techrepublic.com"
OnClick="return confirm('You are about to visit an external site that.nnClick OK to continue or Cancel to abort.');">Click here</a>
Both of the code blocks in Listings C and D will cause a window similar to Figure A to be displayed to the user.

Figure A

Confirm action
You can also use the OnSubmit event on a form to cancel the submission of the form. This works very similarly to the OnClick event in that you can cancel this event by returning false from the handler of the event. The code in Listing E shows how to do this.

Listing E

<form method="get" action="http://www.google.com/search"

OnSubmit="return ConfirmForm();">

<input type="hidden" name="q" value="TechRepublic">

<input type="submit" value="Send Form">

</form>

<script language="JavaScript">

function ConfirmForm()

{

return confirm("You are about to submit a form to Google.nn" +

"Click OK to continue or Cancel to abort.");

}

</script>

This code will produce an alert very similar to the one shown in Figure A -- if the user clicks "Cancel" false will be returned and the OnSubmit event will be aborted. If the user clicks "OK" the form will continue to submit itself as if nothing happened and will search for "TechRepublic" in Google.

Simply alerting the user

If there is an instance where you only need to alert the user -- you can replace the confirm function with the "alert" function. The alert function displays a dialog box with one button labeled "OK", and does not return a value.

2 comments
ameo
ameo

hi, is it possible to use these alerts without clicking any links? i'm looking for someway to alert my blog users about my own studying posts in the extended part of certain posts. so i thought if there is any way to add some code before the extended part so that the user will be alert to either go forward and view the content or go to the previous page. hope you know what i mean.. thanks

wwfromga
wwfromga

The OnClick event in Listing B should say: OnClick="return ExampleFunction();" rather than OnClick="return false;"

Editor's Picks