confirm method and using a hidden confirmation
Syntax of the
confirm method of the
window object to display a dialog box, and wait for the user to either confirm or cancel it. Today, we’ll discuss how it works along with a real-world example.
In this section, we’ll go through the syntax of the
The syntax of the confirm method looks like this:
var result = window.confirm(message);
The confirm method takes a single string argument, and you can pass a message which you want to display in a dialog box. It’s an optional argument, but you'll want to pass a sensible message—otherwise a blank dialog box with yes and no options will be displayed and probably won’t make any sense to your visitors. Usually, a message is in the form of a question, and a user is presented with two options to choose from.
In a dialog box, there are two buttons: OK and Cancel. If a user clicks on the OK button, the confirm method returns
true, and if a user clicks on the cancel button, the confirm method returns
false. So you can use the return value of the confirm method to know the user's selection. (If you want the buttons to say something different, like Yes and No, I'll show you how at the bottom of this post.)
window object is always implicit, which is to say its properties and methods are always in scope, you can also call the
confirm method, as shown in the following snippet.
var result = confirm(message);
So that’s an overview of the syntax of the
confirm method. In the next section, we’ll go through a real-world example.
A Real-World Example of the
In this section, we’ll go through a real-world example which demonstrates how you can use the
Take a look at the following example.
When a user clicks on the Delete My Profile! button, it calls the
deleteProfile function. In the
deleteProfile function, we’ve called the confirm method which presents the confirmation dialog box to the user.
Finally, if a user clicks on the OK button in that confirmation dialog, we’ll go ahead and redirect the user to the
Confirm Yes or No With a Hidden Div
There are some drawbacks of using the
confirm method to get user confirmation. One is that the confirmation dialog will not be part of your app or website's UI. It will not use your branding or color scheme. It also cannot be customized, for example if you want to say Yes or No instead of OK and Cancel. Finally, the confirmation dialog is modal, so as long as it is being displayed, the user will not be able to interact with any other part of your app's interface.
Another way to confirm yes or no is with a hidden div on your page. Take a look at the following example:
In this example, we have a hidden confirmation div with the id
confirm. To show the div, we simply set its
hidden property to
true. We set
true when we want to show the confirmation, and set it to
false again to hide it.
As you can see, this method of confirming yes or no allows us more flexibility and customization than the
window.confirm method. However, this doesn't create a great user experience. Then I showed you how to use a hidden div to get user confirmation with more control over how the confirmation will look and behave.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post