Home 〉 Javascript Tutorials 〉 JavaScript confirm() Tutorial with Examples | Confirm Box in JavaScript

JavaScript confirm() Tutorial with Examples | Confirm Box in JavaScript !

JavaScript confirm() Tutorial with Examples | Confirm Box in JavaScript !

Summary

Ever wondered how to ask the user for confirmation before taking action on your website? The JavaScript confirm() method is the perfect tool for this job. It displays a dialog box asking the user to click “OK” or “Cancel.” In this post, you'll learn what confirm() is, its syntax, how to use it in different ways, and when to use it effectively. We also provide examples with explanations to help you understand the method better. The complete blog post on JavaScript confirm() is as follows.

Introduction to JavaScript confirm()

The JavaScript confirm() method is used to display a dialog box with a message and two buttons — OK and Cancel. It's a built-in function that helps to verify user actions like delete confirmation, form submission, or navigation.

This method pauses the script and waits for the user to respond. If the user clicks “OK”, the method returns true; if “Cancel”, it returns false.

It’s commonly used in web applications to prevent unwanted actions and to add a basic level of interaction without using forms.

Syntax of JavaScript confirm()

html syntax ✍

confirm("message");

message: A string you want to display in the dialog box.

This method returns true if the user clicks "OK", otherwise false.

JavaScript confirm() Example with Explanation

Code : 1

<!DOCTYPE html>
<html>
<body>

<button onclick="jsConfirm()">Click Here</button>

<script>
function jsConfirm() {
let result = confirm("Do you want to delete this file?");
if (result) {
alert("You pressed OK! File will be deleted.");
} else {
alert("You pressed Cancel! File is safe.");
}
}
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

In this example, the confirm box appears with a message. If the user clicks "OK", the page shows a message that the file will be deleted. If the user clicks "Cancel", it shows that the file is safe.

Methods of Using JavaScript confirm()

1. Inline JavaScript

Syntax:

Code : 2

<!DOCTYPE html>
<html>
<body>

<button onclick="confirm('Are you sure?')">Click Me</button>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Here, the confirm() function is directly used inside the onclick event. When the button is clicked, the confirmation box pops up. Simple and quick for small tasks.

2. Internal Script Method

Example:

Code : 3

<!DOCTYPE html>
<html>
<body>

<button onclick="confirmAction()">Proceed</button>

<script>
function confirmAction() {
let decision = confirm("Do you want to continue?");
if (decision) {
alert("You chose to continue.");
} else {
alert("You cancelled the action.");
}
}
</script>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The logic is wrapped inside a function and called using onclick. This method keeps HTML cleaner and is suitable for larger scripts.

3. External Script Method

external.js

Example 📄

function showConfirmBox() {
let userResponse = confirm("Do you agree to our terms?");
if (userResponse) {
alert("Thank you for agreeing!");
} else {
alert("You did not agree.");
}
}

HTML File:

Example 📄

<script src="external.js"></script>
<button onclick="showConfirmBox()">Agree</button>

This separates JavaScript logic from HTML using an external file. Ideal for bigger projects and better performance.

Use Cases of JavaScript confirm()

  • Before deleting a record from a database.
  • Before leaving a page with unsaved changes.
  • Before submitting a sensitive form.
  • To confirm subscription, logout, or payment actions.

Related Topics

Conclusion

The JavaScript confirm() method is a great way to confirm a user's decision before taking important actions. It’s easy to use and works across all browsers. By understanding the different ways to use it—inline, internal, and external—you can choose the best approach for your project. Add this method to your toolbox to enhance user interaction and control flow in your JavaScript applications.

Frequently Asked Questions (FAQs)

What does confirm() do in JavaScript?

The confirm() function shows a dialog box with "OK" and "Cancel" buttons. It returns true if "OK" is clicked, and false if "Cancel" is clicked.

Is JavaScript confirm() supported on all browsers?

Yes, confirm() is supported in all modern browsers like Chrome, Firefox, Edge, Safari, and Opera.

Can I customize the confirm dialog style?

No, the default confirm dialog is browser-controlled and cannot be styled. Use custom modals with HTML/CSS for advanced design.

What is the difference between alert() and confirm() in JavaScript?

alert() shows a message with only an "OK" button, while confirm() shows a message with "OK" and "Cancel", and returns true or false based on the user’s choice.

Previous Post Next Post