Create a Custom Popup on Form Submission

Introduction

This article explains how to implement a SweetAlert pop-up on form run process submission by adding a script to the form itself.

How does it work?

Joget renders an assignment submission button with the assignmentComplete element ID when a form is used inside a process. By intercepting the click event of this button, you can display a SweetAlert pop-up before the actual submission continues. The script below prevents the default submission temporarily, shows the pop-up, and then triggers the real submission once the user clicks OK.

In Form Builder, insert the following code inside a Custom HTML element in the relevant form:

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

<script>
$(document).ready(function () {
  let submitted = false; // flag to prevent multiple triggers

  setTimeout(function () {
    const btn = document.getElementById("assignmentComplete");
    //const btn = document.getElementById("submit") // use "submit" element ID for a default form

    if (btn) {
      btn.addEventListener("click", function (e) {
        if (submitted) return; // do nothing if already submitted

        e.preventDefault();
        submitted = true; // mark as submitted

        Swal.fire({
          title: 'Submitted!',
          text: 'Your form has been submitted successfully.',
          icon: 'success',
          confirmButtonText: 'OK'
        }).then(() => {
          // trigger the original click without recursion
          btn.click();
        });
      });
    }
  }, 10);
});
</script>

Script Configuration

If additional configuration, styling, user reference or advanced behaviour is required, you may refer to the official SweetAlert2 documentation at https://sweetalert2.github.io/ for more information.

Expected Outcome

Upon submitting a form in runtime, a custom pop-up is displayed.

Video Tutorial

Sample App