In this quick article, we’ll discuss how to display the confirm dialog box using JavaScript. The confirm dialog box allows you to perform actions based on the user input.
JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. Here at Envato Tuts+, we’re discussing tips and tricks that will help you in your day-to-day JavaScript development.
As a JavaScript developer, you often need to take user input in the form of yes or no question, and based on that you want to perform certain operations. Specifically, there are certain operations that are sensitive and can’t be undone, and you would like to warn or confirm with users if they really intend to perform the operation, so they don’t do it mistakenly. For example, if there’s a delete link which allows you to delete an entity from a database, you would like to confirm with users if they really want to delete it. So even if users click on the delete link by mistake, they at least get a chance to cancel it.
In this post I'll show you two ways to confirm a user action in JavaScript: using the confirm method, and using a hidden confirmation div.
Syntax of the confirm Method
In JavaScript, you can use 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 window.confirm method.
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 for example, I'll show you how at the bottom of this post.)
Since the window object is always implicit, which is to say it's properties and methods are always in scope, you can also call the confirm method as shown in the following snippet.
var result = confirm(message);
It’s important to note that the confirmation dialog is modal and synchronous. Thus, JavaScript code execution is stopped when the dialog is displayed, and it is continued after the user dismisses the dialog box by clicking on either the ok or cancel button.
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 confirm Method
In this section, we’ll go through a real-world example which demonstrates how you can use the confirm method in JavaScript.
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 /deleteProfie.php page, which will perform the delete operation. On the other hand, if a user clicks on the Cancel button, we won’t do anything. JavaScript execution is halted until the user makes a choice and dismisses the confirmation dialog box.
So that’s how you can use the confirm method in JavaScript to present a yes or no selection dialog box.
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 it's hidden property to true. We set hidden to 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.
Conclusion
Today, we discussed two ways to get user confirmation in JavaScript. First we looked at the simplest way: 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.
No comments:
Post a Comment