Skip to content

Fix preview & submit button on application form #4510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frjo merged 1 commit into from
Apr 21, 2025
Merged

Fix preview & submit button on application form #4510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 58 additions & 9 deletions hypha/apply/funds/templates/funds/application_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand All @@ -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 %}
Expand Down Expand Up @@ -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>
Expand Down
22 changes: 18 additions & 4 deletions hypha/static_src/javascript/application-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
Expand Down Expand Up @@ -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;
Comment thread
theskumar marked this conversation as resolved.
button.textContent = "Submitting...";
}
});
}, 0);
Copy link
Copy Markdown
Member Author

@theskumar theskumar Apr 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the primary fix for form not sending the preview key/value.

});

const unlockApplicationForm = function () {
form.setAttribute("action", "");
button.removeAttribute("disabled");
submitButtons.forEach(function (button) {
button.removeAttribute("disabled");
});
};

// Unlock form on
Expand All @@ -65,9 +77,11 @@
// 3. tab or enter key pressed
document.body.addEventListener("mousemove", unlockApplicationForm, {
once: true,
passive: true,
Copy link
Copy Markdown
Member Author

@theskumar theskumar Apr 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor optimization.

});
document.body.addEventListener("touchmove", unlockApplicationForm, {
once: true,
passive: true,
});
document.body.addEventListener(
"keydown",
Expand All @@ -76,6 +90,6 @@
unlockApplicationForm();
}
},
{ once: true }
{ once: true, passive: true }
);
})();
Loading