Confirm Box In JavaScript With Yes No Option - Tutorial - By EyeHunts

Trang chủ » Html Javascript Message Box Yes No » Confirm Box In JavaScript With Yes No Option - Tutorial - By EyeHunts

Có thể bạn quan tâm

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

Share this:

  • Facebook
  • WhatsApp
  • LinkedIn
  • More
  • X
  • Print
  • Reddit
  • Tumblr
  • Pinterest
  • Pocket
  • Telegram
  • Email

Related

Từ khóa » Html Javascript Message Box Yes No