Disable Submit Button to Prevent Duplicate Submissions (#4275)

* A JS util to disable a submit button after click

* Add a spinny boi, change button text while loading

backend/audit/templates/audit/submission.html

@@ -14,11 +14,15 @@ <h1 class="font-sans-2xl" id="submission">Single Audit Submission</h1>
                         Please save copies of all submitted documents to your local drive. The FAC doesn't maintain these files, and can't return them for future review.
                     </p>
                     <div class="margin-top-6">
-                        <button class="usa-button margin-right-2" id="continue">Submit Single Audit</button>
+                        <div hidden id="loader" class="cross-validation-loader margin-top-6">
+                            <img src="{% static 'img/loader.svg' %}" alt="spinner for processing upload" />
+                        </div>
+                        <button class="usa-button margin-right-2" id="continue" disable-submit-after-click>Submit Single Audit</button>
                         <a href="{% url 'audit:SubmissionProgress' report_id %}">Cancel</a>
                     </div>
                 </fieldset>
             </form>
         </div>
     </div>
+    <script src="{% static 'compiled/js/util.js' %}"></script>
 {% endblock content %}

backend/static/js/util.js

@@ -0,0 +1,30 @@
+/**
+ * Attach an event handler to every button with attribute "disable-submit-after-click".
+ * This will disable the button after clicking it, enable the sibling spinning icon
+ * (if it exists), and submit the form.
+ */
+function disableSubmitAfterClick() {
+  const matching_buttons = document.querySelectorAll(
+    'button[disable-submit-after-click]'
+  );
+
+  matching_buttons.forEach((button) => {
+    const form = button.closest('form'); // Parent form
+    const loader = button.parentElement.querySelector(`div[id='loader']`); // Sibling loader
+
+    button.addEventListener('click', () => {
+      button.disabled = true;
+      button.textContent = 'Submitting...';
+      if (loader) {
+        loader.hidden = false;
+      }
+      form.submit();
+    });
+  });
+}
+
+function init() {
+  disableSubmitAfterClick();
+}
+
+window.onload = init;