From 0afd565f18193b7e783cd3459143d11f26551410 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Sat, 19 Apr 2025 19:16:14 +0530
Subject: [PATCH] Fix preview & submit button on application form

If the submit button is disabled before submit event is processed by the
borwser, the name/value on the button is not included in the form value.

This PR fixes that by using setTimeout.

There are other minor updates to js, e.g. iterating on submit buttons
instead of processing only the first submit button.

Some formatting update html is also there - helps keep html readiable
and for better git diff in future.
---
 .../templates/funds/application_base.html     | 67 ++++++++++++++++---
 .../static_src/javascript/application-form.js | 22 ++++--
 2 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/hypha/apply/funds/templates/funds/application_base.html b/hypha/apply/funds/templates/funds/application_base.html
index 3ce58cc98d..f5c9c6c73f 100644
--- a/hypha/apply/funds/templates/funds/application_base.html
+++ b/hypha/apply/funds/templates/funds/application_base.html
@@ -13,7 +13,9 @@
                     <span class="font-bold text-fg-muted">{% trans "Next deadline" %}: {{ page.end_date }}</span>
                 </p>
             {% endif %}
+
             <h1 class="text-5xl font-bold">{{ page.title }}</h1>
+
             {% if form.errors or form.non_field_errors %}
                 <div class="wrapper wrapper--error">
                     {% heroicon_solid "exclamation-triangle" aria_hidden="true" class="inline me-2 fill-red-500" %}
@@ -24,18 +26,30 @@ <h1 class="text-5xl font-bold">{{ page.title }}</h1>
                             {% endfor %}
                         </ul>
                     {% else %}
-                        <h5 class="heading heading--no-margin heading--regular">{% trans "There were some errors with your form. Please amend the fields highlighted below" %}</h5>
+                        <h5 class="heading heading--no-margin heading--regular">
+                            {% trans "There were some errors with your form. Please amend the fields highlighted below" %}
+                        </h5>
                     {% endif %}
                 </div>
             {% endif %}
 
             {% if not page.open_round and not page.start_date and not request.is_preview %}
-            {# the page has no open rounds and we arent on a round page #}
+                {# the page has no open rounds and we arent on a round page #}
                 {% verbose_name page as name %}
-                <h4>{% blocktrans %}Sorry, this {{ name }} is not currently accepting applications.{% endblocktrans %} <a href="{% url 'home' %}">{% trans "See other funds" %} {% heroicon_mini "arrow-right" class="inline mb-0.5 align-text-bottom" %}</a></h4>
+                <h4>
+                    {% blocktrans %}Sorry, this {{ name }} is not currently accepting applications.{% endblocktrans %}
+                    <a href="{% url 'home' %}">
+                        {% trans "See other funds" %} {% heroicon_mini "arrow-right" class="inline mb-0.5 align-text-bottom" %}
+                    </a>
+                </h4>
             {% else%}
                 {% if page.get_parent.specific.guide_link %}
-                    <a href="{{ page.get_parent.specific.guide_link }}" class="print:hidden" target="_blank" rel="noopener noreferrer">
+                    <a
+                        href="{{ page.get_parent.specific.guide_link }}"
+                        class="print:hidden"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
                         {% trans "Application guide" %}
                     </a>
                 {% endif %}
@@ -67,15 +81,50 @@ <h4>{% blocktrans %}Sorry, this {{ name }} is not currently accepting applicatio
                     {% endfor %}
 
                     <div class="form__group">
-                        {# If a preview is required for this application, don't allow submitting yet (via name="preview"). At the moment, this functionality only works if a user is logged in. #}
+                        {% comment %}
+                            If a preview is required for this application,
+                            don't allow submitting yet (via name="preview").
+                            At the moment, this functionality only works if a user is logged in.
+                        {% endcomment %}
                         {% if require_preview and request.user.is_authenticated %}
-                            <button class="button button--submit button--primary" type="submit" name="preview" disabled>{% trans "Preview and submit" %}</button>
+                            <button
+                                class="button button--submit button--primary"
+                                type="submit"
+                                name="preview"
+                                value="Preview and Submit"
+                                disabled
+                            >
+                                {% trans "Preview and submit" %}
+                            </button>
                         {% else %}
-                            <button class="button button--submit button--primary" type="submit" disabled>{% trans "Submit for review" %}</button>
+                            <button
+                                class="button button--submit button--primary"
+                                type="submit"
+                                disabled
+                            >
+                                {% trans "Submit for review" %}
+                            </button>
                         {% endif %}
-                        <button class="button button--submit button--white" type="submit" name="draft" value="Save draft" formnovalidate>{% trans "Save draft" %}</button>
+
+                        <button
+                            class="button button--submit button--white"
+                            type="submit"
+                            name="draft"
+                            value="Save draft"
+                            formnovalidate
+                        >
+                            {% trans "Save draft" %}
+                        </button>
+
                         {% if not require_preview and request.user.is_authenticated %}
-                            <button class="button button--submit button--white" type="submit" name="preview">{% trans "Preview" %}</button>
+                            <button
+                                class="button button--submit button--white"
+                                type="submit"
+                                name="preview"
+                                value="Preview"
+                            >
+                                {% trans "Preview" %}
+                            </button>
                         {% endif %}
                     </div>
                 </form>
diff --git a/hypha/static_src/javascript/application-form.js b/hypha/static_src/javascript/application-form.js
index 50f1d0e8ac..b3c5eca49f 100644
--- a/hypha/static_src/javascript/application-form.js
+++ b/hypha/static_src/javascript/application-form.js
@@ -1,7 +1,7 @@
 (function () {
   const form = document.querySelector(".application-form");
   const links = form.querySelectorAll("a");
-  const button = form.querySelector("[type=submit]");
+  const submitButtons = form.querySelectorAll("[type=submit]");
   const required = form.querySelectorAll("input[required]");
   const groups = form.querySelectorAll(".form__group");
   const errors = form.querySelectorAll(".form__error");
@@ -51,12 +51,24 @@
 
   // Block multiple form submits.
   form.addEventListener("submit", function () {
-    button.setAttribute("disabled", "disabled");
+    // Use setTimeout with 0 delay to ensure form submission begins
+    // before the buttons are disabled, allowing their values to be included
+    setTimeout(function () {
+      submitButtons.forEach(function (button) {
+        button.setAttribute("disabled", "disabled");
+        if (button.textContent) {
+          button.dataset.originalText = button.textContent;
+          button.textContent = "Submitting...";
+        }
+      });
+    }, 0);
   });
 
   const unlockApplicationForm = function () {
     form.setAttribute("action", "");
-    button.removeAttribute("disabled");
+    submitButtons.forEach(function (button) {
+      button.removeAttribute("disabled");
+    });
   };
 
   // Unlock form on
@@ -65,9 +77,11 @@
   // 3. tab or enter key pressed
   document.body.addEventListener("mousemove", unlockApplicationForm, {
     once: true,
+    passive: true,
   });
   document.body.addEventListener("touchmove", unlockApplicationForm, {
     once: true,
+    passive: true,
   });
   document.body.addEventListener(
     "keydown",
@@ -76,6 +90,6 @@
         unlockApplicationForm();
       }
     },
-    { once: true }
+    { once: true, passive: true }
   );
 })();