Skip to content

Confirm box in JavaScript with yes no option

  • by

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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading