How to use JavaScript to show a confirm message?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to use JavaScript to show a confirm message. We use window.confirm() method of JavaScript to show a confirm message. A confirm message is enclosed in a confirm dialog box which is a modal window. Such a window takes focus upon being created and doesn’t go out of focus until the user responds to it.

Confirmation dialog box in JavaScript

A confirm message is a yes/no message for the user that requires immediate attention. A confirmation dialog box usually gets triggered in response to some action requested by the user. This action can be anything like opening a new page, submitting a form, redirecting to a different site, etc. A confirmation box has two buttons: ok and cancel. Based on the option selected by the user a boolean value is returned which is then used to either fulfill the action request or close the confirmation box and continue.

A dialog box can be thought of as a superset of an alert box. There are mainly three kinds of dialog boxes −

alert box
confirmation box
prompt box

A confirmation box in JavaScript is created using the confirm() method. This method accepts a single string argument which is the message that is displayed in the confirmation box.

Syntax

var isConfirmed = confirm("Your Confirmation Message");

The value stored in isConfirmed can then be used to process the request.

Let us see with an example −

Example 1

Here we are going to show a confirm message in JavaScript which confirms before quitting the window. Let’s look at the code for same.


<html>
<head>
   <script>
      function getConfirmation() {
         var result = document.getElementById("result");
         var retVal = confirm("Do you want to continue ?");
         if (retVal == false) {
            result.innerHTML = "User does not want to continue !";
         } else {
            var url = window.location.href;
            window.open(url);
         }
      }
   </script>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>The Below button duplicates this tab</p>
   <form>
      <input type="button" value="Duplicate ?" onclick="getConfirmation();" />
   </form>
   <div id="result"></div>
</body>
</html>

In the above code, we are creating a confirmation box that takes the user’s permission and based on it duplicates the tab or gets closed.

Let us look at another example, this time we will use a hyperlink in the HTML document.

Example 2

Here we are going to show a confirm message in JavaScript which confirms before redirecting to the link.


<html>
<head>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>click on the below link to create a confirmation box
      <br><br>
      <a href="https://www.tutorialspoint.com/javascript/index.htm" id="link">Javascript Tutorials</a>
   </p>
   <div id="result"></div>
   <script>
      var result = document.getElementById("result");
      var link = document.getElementById("link");
      link.onclick = function() {
         var check = confirm("Are you sure you want to leave?");
         if (check == true) {
            return true;
         } else {
            return false;
         }
      }
   </script>
</body>
</html>

We have attached a click handler to the link which creates a confirmation box before redirecting to the clicked link. The value returned from the function to the onclick attribute of the button processes the request.

A confirmation box has much utility in forms. It gives the user a chance to cancel the submission if the button got pressed accidentally.

Example 3

Here we will create a mock form to understand the utility of the confirmation box.


<html>
<head>
   <script>
      function getConfirmation() {
         var result = document.getElementById("result");
         var form = document.getElementById("form");
         var retVal = confirm("Do you want to submit ?");
         form.reset();
         if (retVal == false) {
            result.innerHTML = "Any sort of accidental click can be handled this way !";
         } else {
            result.innerHTML = "Form Submitted !";
         }
      }
   </script>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>click on the below link to create a confirmation box
      <br><br>
      <form id="form">
         <label for="name">Name</label><br>
         <input type="text" id="name"><br>
         <label for="age">Age</label><br>
         <input type="text" id="age"><br>
      </form>
      <button onclick="getConfirmation()">Submit</button>
   </p>
   <div id="result"></div>
</body>
</html>

However, it has its disadvantages as well. A confirmation box is a part of the dialog box which is a modal window. These types of windows take complete focus when they are rendered and are not closed until an action is performed on the box thereby preventing the user from interacting with the webpage. UI elements should be used only for important confirmations, alerts, and warnings.

Conclusion

The dialog box in JavaScript shows important messages, alerts, or warnings. They should be used wisely at appropriate locations to enhance the user experience.