Confirm box in JavaScript with yes no option

You can create a JavaScript confirmation box that offers “yes” and “no” options by using the confirm() method. You can specify a custom message as its argument.

window.confirm(message);

Confirm box in JavaScript with yes no option

A Simple example code 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.

<!DOCTYPE html>
<html>
<body>
  <script>

    function confirmAction() {
      let confirmAction = confirm("Are you sure to execute this?");
      if (confirmAction) {
        alert("Action successfully executed");
      } else {
        alert("Action canceled");
      }
    }
  </script>

  <button onclick="confirmAction()">Delete</button>
</body>
</html>

Output:

Confirm box in JavaScript with yes no option

Make javascript alert Yes/No Instead of OK/Cancel

To create a dialog with “yes” or “nor”, use a custom dialog box. You can’t create a dialog box with “yes” or “no”.

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         function functionConfirm(msg, myYes, myNo) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes,.no").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.find(".no").click(myNo);
            confirmBox.show();
         }
      </script>
      <style>
         #confirm {
            display: none;
            background-color: #ffffff;
            border: 1px solid #aaa;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 6px 8px 8px;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
            margin: 10px;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <div id="confirm">
         <div class="message"></div>
         <button class="yes">Yes</button>
         <button class="no">No</button>
      </div>
      <button onclick = 'functionConfirm("Do you like Football?", function yes() {
         alert("Yes")
      },
      function no() {
         alert("no")
      });'>submit</button>
   </body>
</html>

Here’s how you can use it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirm Box Example</title>
</head>
<body>

<script>
    // Function to show the confirm box
    function showConfirmation() {
        // Display the confirm box with a message
        var result = window.confirm("Do you want to proceed?");

        // Check the result
        if (result) {
            // User clicked 'Yes'
            alert("You clicked Yes!");
        } else {
            // User clicked 'No' or closed the confirm box
            alert("You clicked No or closed the box!");
        }
    }
</script>

<!-- Button to trigger the confirmation box -->
<button onclick="showConfirmation()">Click to Confirm</button>

</body>
</html>

On this code:

We define a function showConfirmation() that displays a confirm box with the message “Do you want to proceed?” when called.
When the user clicks either “OK” or “Cancel” in the confirm box, the result is stored in the result variable.
Depending on the user’s choice, an alert is shown indicating whether the user clicked “Yes” or “No” or closed the confirm box.

Confirm Yes or No With a Hidden Div

Another way to confirm yes or no is with a hidden div on your page.

<main>
  <h1>Delete Profile</h1>    
  <p>Click on the following button to delete your profile from our website permanently, this action can not be undone </p>
  <button onclick="resetDatabase()">Reset the Database!</button>
  <div id="confirm" hidden>
    <h3>Confirmation</h3>
    <p>Do you really want to reset the database?</p>
    <button class="warning" onclick="confirmYes()">Yes</button>
    <button onclick="confirmNo()">No</button>  
  </div>
</main>

<script>
  //show the confirmation div
  function resetDatabase() {
    document.getElementById("confirm").hidden=false
  }
  
  //redirect to the delete profile script
  function confirmYes() {
        location.href = '/resetDatabase.php';
  }
  
  //hide the confirmation div
  function confirmNo() {
    document.getElementById("confirm").hidden=true
  }
</script>

Do comment if you have any doubts or suggestions on this JS confirm box topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

Confirm box in JavaScript with yes no option