The confirm method in JavaScript triggers a function that prompts the user for confirmation regarding a specific action. The confirm method utilizes a window object to present a dialogue box containing a question along with two buttons: OK and Cancel. If the user clicks the OK button, the execution of the function will proceed; conversely, if the Cancel button is chosen, the execution of the code block will be halted.
It yields true when the user opts for the OK option; if not, it produces false.
Syntax:
confirm("Select an Option!");
Parameters:
To present a confirmation dialog to the user, you need to provide a "message" parameter in the form of a string.
Return value:
The confirm function provides a Boolean response, yielding either true or false, depending on whether the OK button is chosen.
A boolean value that indicates if OK (true) or Cancel (false) was chosen. In situations where a browser does not recognize in-page dialogue prompts, the value returned will consistently be false.
Usage of the Confirm method
- The JavaScript confirm method is used to display a specific message on a dialogue window with the OK and Cancel options to confirm the user action.
- For dealing with some CRUD operations, it is necessary to use a confirmation message instead of directly applying an action.
- It is used to accept or verify something.
- It forces the browser to read the message and focus on the current window.
- It stops all the actions until the confirmation window is closed.
- It returns true when users select OK and false on the selection of the CANCEL option.
Note: The JavaScript confirm method should not be overused. It blocks access to the other parts of the page until action is selected or the window is closed.
Examples:
Example1: Printing the selected action
Test.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to invoke the confirm().</p>
<button onclick="myFunction()">Click Here</button>
<p id="conf"></p>
<script>
function myFunction() {
var result;
var r = confirm("Select an Action!");
if (r == true) {
result = "You have selected OK!";
} else {
result = "You have selected Cancelled!";
}
document.getElementById("conf").innerHTML = result;
}
</script>
</body>
</html>
Output:
The HTML page mentioned above is designed to showcase a block of text along with an action button, which will be presented as follows:
Upon clicking the Click Here button, a dialog box will appear displaying the designated message along with options for OK and Cancel.
Upon choosing the OK action, the code designated for the true block will be executed; if not, the code from the false block will run. Refer to the output shown below:
Example 2: Employing the confirm function with a conditional statement
Test.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to invoke the confirm().</p>
<button onclick="myFunction()">Click Here</button>
<p id="conf"></p>
<script>
function myFunction() {
if (window.confirm("Do you really want to delete?")) {
document.getElementById("conf").innerHTML = "you have successfully deleted the file"
}
}
</script>
</body>
</html>
Output:
The HTML page outlined above will showcase a piece of text along with a functional action button, structured in the following manner:
Upon clicking the Click Here button, a dialog window will appear displaying the designated message along with OK and Cancel buttons for user interaction.
When we opt for the OK action, the code within the true block will be executed; if not, the false block code will run instead. Examine the output shown below:
In the preceding example, it is evident that when the OK option is chosen, the designated action outlined within the if statement is executed.
Example 3: Presenting the action message across several lines
To present the action message over several lines, we can insert a \n immediately before the line that we wish to appear on a new line.
Consider the below example:
Test.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to invoke the confirm().</p>
<button onclick="myFunction()">Click Here</button>
<p id="conf"></p>
<script>
function myFunction() {
if (window.confirm("Do you really want to delete?\nDeletion can not be reverted if you confirm!")) {
document.getElementById("conf").innerHTML = "you have successfully deleted the file"
}
}
</script>
</body>
</html>
Output:
From the output presented above, it is evident that the action message has been displayed across several lines.