I am looking to create a loading screen that triggers when a Django form is submitted. Here is an example code snippet:
forms.py
class ExampleForm(forms.Form):
example_field = forms.CharField(
widget=forms.TextInput(attrs={'class': 'form-control'})
)
index.html
<style>
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
z-index: 5000;
text-align: center;
padding-top: 20%;
}
</style>
<form action="example_form">
{% for each in example_form %}
{{ each.label_tag }}
{{ each }}
{% endif %}
<button type="submit" class="btn btn-primary" name="action" value="submit">submit</button>
</form>
<script>
$(document).ready(function () {
function ShowLoading() {
$(".overlay").show();
}
$("button[type='submit']").on("click", ShowLoading)
})
</script>
This implementation displays the loading screen upon clicking the submit button before the next page loads. However, an issue arises when attempting to submit the form without filling out the mandatory field. Despite an input tooltip reminder appearing, the loading screen still shows up because of the click trigger regardless if a new page is being loaded or not.
I am seeking a solution where the loading screen activates as the next page loads but prior to its actual appearance. Is there a way for JavaScript to detect this transition?