How to Show a Yes/No Confirmation Box in JavaScript

The confirm dialog box, often referred to as the yes/no box, is one of three basic dialog boxes available to a developer when using JavaScript. A dialog box is simply a way to pop up a message to the user and, as in the case of the confirm dialog, retrieve some type of user interaction for use on the webpage. There are three types of dialog boxes available within JavaScript, and they are all used in essentially the same way. All three can be called from any scope within JavaScript or HTML code, but the confirm dialog is one of two that actually return a value based on user interaction.

Perhaps the most useful of the dialog boxes is the confirmation (or yes/no) box. By calling this box, the developer provides the user with a statement or question and the ability to either confirm or deny the dialog by means of pressing one of the two buttons, labeled "OK" and "Cancel" respectively. A boolean value is then returned to the calling script with a true value if "OK" was selected and false otherwise. As with all JavaScript dialog boxes, the yes/no box is extremely easy to invoke. It can be done by simply passing a desired string message to be displayed through the confirm() function. By comparing the boolean value returned by this function call, you will quickly be able to start using this dialog box to provide more user interaction into your websites.

See the source for a confirm box in action

With great knowledge comes great responsibility - or something like that. Basically, simply having the knowledge to make a website execute a particular action does not mean that we should implement that action at every opportunity. Quite the contrary, we need to be subtle and suave in our use of anything that will interrupt the user's process of perusing our website. One of the only acceptable times to use this method is when we need to actually confirm that the user wants to proceed with a requested action (such as submitting a form or deleting an item from a list). Let's look at a code sample for the latter:

Practical usage of a Confirmation Box

By glancing at this code sample, you can see how placing a confirmation box within the flow of logic, especially one triggered by a user induced event (such as a click or selection of some sort), is a great usage for this tool. We can easily give the user one last chance to opt out of a selected action and, as the name of the dialog suggests, simply confirm with them that they would like for the action to proceed. Providing such a check within your code can sometimes ease the user's mind and give them more confidence that they will not accidentally trigger something with undesired effects. Ease of use and practicality must be balanced in development, and using this confirmation box is a great way to assist with that.