Khalid Abuhakmeh explains how to enhance destructive operation confirmations in web apps by intercepting Htmx events and displaying user-friendly SweetAlert dialogs instead of native browser confirms.

Confirmation Dialogs with Htmx and SweetAlert

By Khalid Abuhakmeh

Confirmation Dialogs with Htmx and SweetAlert

Photo by Fabian Gieske

When building web experiences, distinguishing between safe and destructive user actions is critical. For potentially dangerous actions (like deleting data), it’s common practice to seek user confirmation before proceeding.

This guide explores a feature from the Htmx documentation allowing interception of outgoing requests and presentation of a SweetAlert confirmation dialog. This technique increases UX control and enhances user trust.

Understanding the htmx:confirm Event

Htmx provides the hx-confirm attribute for declarative confirmation dialogs:

<button class="btn btn-danger" hx-post="" name="input" value="DELETE" hx-confirm="Are you sure?">
  Delete Important Stuff
</button>

This invokes the browser’s native confirm dialog, giving users a final choice before a destructive operation.

Lesser known is the htmx:confirm event: it triggers before every Htmx request, allowing developers to intercept, halt, or programmatically continue any client action—enabling advanced UX possibilities.

To register for this event, add the following JavaScript to your app:

// Intercept every htmx confirmation
document.body.addEventListener('htmx:confirm', function (evt) {
  // evt.preventDefault() to halt
  // evt.detail.issueRequest() to proceed
});

Now let’s improve on the default, basic dialog.

Integrating SweetAlert for Modern Confirmation Dialogs

You can replace standard confirm dialogs with SweetAlert modals for better clarity, branding, and UX. Here’s how:

  1. Add SweetAlert to your web application

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  2. Mark elements needing modals for destructive actions

    <button class="btn btn-danger" hx-post="" name="input" value="DELETE" confirm-with-sweet-alert='true'>
  Delete Important Stuff
</button>

    The confirm-with-sweet-alert attribute is optional—use it if you want to selectively apply SweetAlert only to certain actions. Otherwise, the event handler can intercept all requests globally.

  3. Write an event handler for selective confirmation

    // site.js
document.body.addEventListener('htmx:confirm', function (evt) {
  if (evt.target.matches("[confirm-with-sweet-alert='true']")) {
    evt.preventDefault();
    swal({
      title: "Are you sure?",
      text: "Are you sure you are sure?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((confirmed) => {
      if (confirmed) {
        evt.detail.issueRequest();
      }
    });
  }
});

With this configuration:

  • Only buttons (or elements) with confirm-with-sweet-alert='true' use SweetAlert dialogs
  • All others fall back to standard Htmx confirmations
  • Users are shown a branded, modern confirmation modal before dangerous actions are performed

Benefits and Flexibility

  • Event Interception: Use the htmx:confirm event to tap into requests before their completion, customizing confirmation flows.
  • Enhanced UX: SweetAlert offers improved visuals, customizable text, icons, and action buttons, resulting in more informed decisions by users.
  • Selective Application: By using a specific attribute, you gain fine-grained control over which actions require richer confirmation dialogs.

Conclusion

Htmx’s extensibility opens the door for premium user experiences. By combining its confirmation events with external libraries like SweetAlert, you elevate both safety and professionalism in your ASP.NET or web apps. Explore the Htmx documentation for more creative UX enhancements.

About the Author

Khalid Abuhakmeh's Picture

Khalid Abuhakmeh is a developer advocate at JetBrains focusing on .NET technologies and tooling.

Further Reading

This post appeared first on “Khalid Abuhakmeh’s Blog”. Read the entire article here