
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to use JavaScript to show a confirm message?
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.
- Related Articles
- How to show a dialog to confirm that the user wishes to exit an Android Activity?
- How to change button label in confirm box using JavaScript?
- How to center the JavaScript alert message box?
- How do I print a message to the error console using JavaScript?
- How to confirm before stopping the process in PowerShell?
- How do I display image in alert/confirm box in JavaScript?
- How to display a message when a given number is in the range using JavaScript?
- How to show hyperlinks in JavaScript alert?
- How to show for loop using a flowchart in JavaScript?
- How to display message from a stored procedure?
- How to create a chat message with CSS?
- How to create a message box with Tkinter?
- How to create a Tkinter error message box?
- How to use JavaScript Object.defineProperty?
- How to use a Boolean in JavaScript Constructors?
