How to create a dialog with “Yes” and “No” options in JavaScript?

General Discussions
, ,
1

I’m building a button to trigger an action and save data to a database. Once the user clicks the button, I want to show a dialog with “Yes” and “No” options. If the user selects “Yes”, the data will be inserted into the database; if “No”, no action will be taken. How can I display a JavaScript confirm yes no dialog to achieve this?

2

I’ve been working with front-end interactions for many years now, and the quickest way to get a simple ‘Yes/No’ dialog in JavaScript is still the built-in confirm() method.”*

function handleAction() {
  var userConfirmed = confirm("Are you sure you want to save the data?");
  if (userConfirmed) {
    console.log("Data saved!");
    // Logic to save data
  } else {
    console.log("No action taken.");
  }
}

document.getElementById("myButton").onclick = handleAction;

The confirm() method isn’t labeled as “Yes” or “No”, but with the right message and logic, it acts exactly like a javascript confirm yes no dialog—returning true for “OK” (Yes) and false for “Cancel” (No). Simple, native, and great for quick confirmations.

3

Hey! @Shielagaa :wave:

If you’re looking for a cleaner, more custom approach than the default confirm() dialog, this solution worked well for me!

For a more customized dialog with “Yes” and “No” buttons, you can create a modal-like dialog with HTML and use JavaScript to show/hide it:

<div id="myModal" style="display:none; background-color: rgba(0,0,0,0.5); padding: 20px;">
  <div style="background: white; padding: 20px; text-align: center;">
    <p>Are you sure you want to save the data?</p>
    <button onclick="confirmAction()">Yes</button>
    <button onclick="closeModal()">No</button>
  </div>
</div>

<button id="myButton">Save Data</button>

<script>
document.getElementById("myButton").onclick = function() {
  document.getElementById("myModal").style.display = "block"; // Show the modal
};

function confirmAction() {
  console.log("Data saved!");
  document.getElementById("myModal").style.display = "none"; // Close the modal
}

function closeModal() {
  console.log("No action taken.");
  document.getElementById("myModal").style.display = "none"; // Close the modal
}
</script>

Custom modals allow more flexibility for design and UI behavior, so you can style it to fit your needs.

4

And if you’re aiming for something even more elegant and user-friendly, this worked really well for me too :point_down:

Use the SweetAlert2 library. It’s a popular choice for custom modals.

Here’s how you can implement it:

<!-- Include SweetAlert2 library -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<button id="myButton">Save Data</button>

<script>
document.getElementById("myButton").onclick = function() {
  Swal.fire({
    title: 'Are you sure you want to save the data?',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'Yes',
    cancelButtonText: 'No'
  }).then((result) => {
    if (result.isConfirmed) {
      console.log("Data saved!");
      // Insert data into the database here
    } else {
      console.log("No action taken.");
    }
  });
};
</script>

SweetAlert2 provides a clean, polished dialog experience with minimal code. It also supports various animations and customization options.

While the built-in confirm() method is great for simple dialogs, custom modals (like in Solution 2) or SweetAlert2 (Solution 3) give you greater control over the appearance and functionality, making your user experience smoother and more modern!

Feel free to choose the one that fits your needs the best! Let me know if you’d like more help with any of these :speech_balloon: