JavaScript Confirmation: Select Yes or No

In this short article, we will discuss how to display a confirmation dialog using JavaScript. Confirmation dialog boxes allow you to perform actions based on user input.

JavaScript is one of the core technologies of the Internet. It is used by most websites and supported by all modern web browsers without the need for plugins. Here at Envato Tuts, we’re discussing tips and tricks that can help you with your day-to-day JavaScript development.

As a JavaScript developer, you often need to get user input in the form of a yes or no question and perform some action based on it. Specifically, some actions are sensitive and cannot be undone, and you want to give the user a warning or confirmation that they actually intended to perform the action so they don't do it by mistake. For example, if there is a delete link that allows you to delete an entity from the database, you need to confirm with the user whether they actually want to delete it. So even if a user clicks on the delete link by mistake, they at least have a chance to cancel it.

In this article, I will show you two ways to confirm user actions in JavaScript: using the confirm method and using a hidden confirmation div.

confirm Syntax of method

In JavaScript, you can use the confirm method of the window object to display a dialog box and wait for the user to confirm or cancel. Today, we’ll discuss how it works with a practical example.

In this section, we will introduce the syntax of the window.confirm method.

The syntax of the confirm method is as follows:

var result = window.confirm(message);

The

confirm method takes a single string parameter, which you pass the message to display in the dialog box. This is an optional parameter, but you need to pass a sensible message, otherwise a blank dialog box with yes and no options will be displayed and may not mean anything to your visitors. Typically, the message takes the form of a question and provides the user with two options to choose from.

In the dialog box, there are two buttons: OK and Cancel. If the user clicks the OK button, the confirm method returns true. If the user clicks the Cancel button, the confirm method returns false. So you can understand the user's choice through the return value of the confirm method. (If you want the button to display something different, such as Yes and No, I'll show you how at the bottom of this article.)

Since the window object is always implicit, meaning its properties and methods are always in scope, you can also call the confirm method, as shown in the following code snippet Show.

var result = confirm(message);

It should be noted that the confirmation dialog box is modal and synchronous. Therefore, JavaScript code execution stops when the dialog box is displayed and continues after the user closes the dialog box by clicking the OK or Cancel button.

This is the syntax overview of the confirm method. In the next section, we present a real-world example.

confirm Real example of method

In this section, we will demonstrate how to use the confirm method in JavaScript through a practical example.

Take a look at the example below.

When the user clicks Delete my profile! button, it will call the deleteProfile function. In the deleteProfile function, we call the confirm method, which displays a confirmation dialog box to the user.

Finally, if the user clicks the OK button in the confirmation dialog, we will proceed to redirect the user to the /deleteProfile.php page, which will perform the delete operation. On the other hand, if the user clicks the Cancel button, we will not perform any action. JavaScript execution will stop until the user makes a selection and closes the confirmation dialog.

This is how to use the confirm method in JavaScript to render a yes or no selection dialog.

Confirm Yes or No using hidden Div

There are some disadvantages to using the confirm method to obtain user confirmation. One is that the confirmation dialog does not become part of your app or website UI. It won't use your branding or color scheme. It's also not customizable, 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 displayed, the user cannot interact with any other part of the app interface.

Another way to confirm yes or no is to use a hidden div on the page. Take a look at the following example:

In this example, we have a hidden confirmation div with the ID confirm. To show a div, we simply set its hidden property to true. When we want to show the confirmation message, we set hidden to true and set it again to false to hide it.

As you can see, this method of confirming yes or no gives us more flexibility and customization than the window.confirm method.

in conclusion

Today, we discussed two ways to get user confirmation in JavaScript. First let’s look at the simplest method: window.confirm method. However, this does not create a good user experience. Then I showed you how to use a hidden div to get user confirmation and have more control over how the confirmation looks and behaves.

The above is the detailed content of JavaScript Confirmation: Select Yes or No. For more information, please follow other related articles on the PHP Chinese website!