Javascript Bootstrap Spinner Visible on submit

Это проект Django. У меня есть этот Bootstrap спиннер в span в кнопке:

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

И это CSS.

.not-visible {
  display: none;
}

Я удаляю класс "not-visible" в 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...';

Из журнала консоли видно, что класс успешно удален. Но спиннер по-прежнему НЕ отображается. И я не могу понять почему... Спасибо!!!

Это должно работать:

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

innerText действительно удаляет все содержимое узла, как вы и сказали.

Это решение, чтобы заставить спиннер вращаться. 😊

Вернуться на верх