Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Example 1: Button Click Confirmation
Here we are going to show a confirm message in JavaScript which confirms before duplicating the current tab.
<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.
Example 2: Link Click Confirmation
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.
Example 3: Form Submission Confirmation
A confirmation box has much utility in forms. It gives the user a chance to cancel the submission if the button got pressed accidentally.
<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>
Return Values
The confirm() method returns:
- true - when the user clicks "OK"
- false - when the user clicks "Cancel" or presses Escape
Best Practices
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.
- Use confirm dialogs sparingly for critical actions only
- Keep confirmation messages clear and concise
- Consider modern alternatives like custom modal dialogs for better user experience
Conclusion
The confirm() method provides a simple way to get user confirmation before performing actions. Use it wisely for important decisions to enhance user experience and prevent accidental actions.
7K+ Views
