in this tutorial, We’ll show you how to create a confirmation dialog box with yes and no options using JavaScript.You can create a JavaScript confirmation box that display yes and no options by using the confirm() and prompt method.
The confirm() method is part of the window object, which means you can only call it from the browser. There are following built-in JavaScript methods that those alert popups :
- Alert Box
- Confirm Box
- Prompt Box
The issue with these pre-defined JavaScript alerts is that you can’t modify them; you can’t alter their value or appearance.
Yes Or No option Using ConfirmBox
A dialogue box with a personalized message that you can define as its argument will be displayed by the confirm() method.
The only difference between it and the JavaScript alert() function is that confirm() will display two buttons as opposed to the JavaScript method’s single button.
Simple Example:
let isExecuted = confirm("Are you sure to leave this pagde?");
console.log(isExecuted);
confirm() returns true if the user clicked the OK button. When the Cancel button is pressed, the method returns false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript confirmation box</title>
<script>
function deleteRecord() {
let confirmAction = confirm("Are you sure delete this record?");
if (confirmAction) {
alert("Successfully! deleted record ");
} else {
alert("Safe record!");
}
}
</script>
</head>
<body>
<h1>Call the confirmation box</h1>
</body>
<table class="invert" style="background-color: aliceblue;">
<thead>
<tr>
<td>Field name</td>
<td>Mandatory</td>
<td>Allowed values</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>Seconds </td><td> Yes </td><td> 0-59</td><td><button onclick="deleteRecord()">Delete</button></td></tr>
</tr>
</tbody>
</table>
</body>
</html>
Output:
