This Django project features a Bootstrap spinner within a button, as seen in the code snippet below:
<form method="POST" id="pdfUploadForm" enctype="multipart/form-data">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-primary" type="submit" id="submitButton">
<span id="spinner-box" class="spinner-border spinner-border-sm not-visible" role="status" aria-
hidden="true"></span>
Submit...
</button>
</form>
The corresponding CSS:
.not-visible {
display: none;
}
The issue arises when trying to remove the "not-visible" class using JavaScript:
document.getElementById('pdfUploadForm').addEventListener('submit', async (e) => {
e.preventDefault();
console.log(document.getElementById('spinner-box').classList);
document.getElementById('spinner-box').classList.remove('not-visible');
console.log(document.getElementById('spinner-box').classList);
document.getElementById('submitButton').innerText = 'Processing...';
Despite successfully removing the class, the spinner fails to display. Any insights would be greatly appreciated! Thanks.