Search code examples
javascripthtmlcssdjangobootstrap-5

Bootstrap Spinner Visible on submit

It's a Django project. I got this Bootstrap spinner in a span in a button:

<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>

And that CSS.

.not-visible {
  display: none;
}

I'm removing the class "not-visible" in 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...';

From the console log the class is successfully removed. But the spinner is still NOT displaying. And i can't get why... Thanks!!

Solution

  • This should work:

    document.getElementById('submitButton').innerHTML = '<span id="spinner-box" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Processing...';

    innerText does remove the whole content of the node, as @Maquisard said.

    This is a solution.