document.getElementById().style.display = “block” doesnt work in same function as document.getElementById().innerText

Question

I have a simple form that calls a function 'activate_loading' onsubmit. 'activate_loading' contains two lines of code to display a loading spinner and change text of submit button to 'Please wait':

        document.getElementById("loader_mini").style.display = "block";

changes the display of the loading spinner from display:none to display: block.

        document.getElementById("submitBtn").innerText = "Please Wait...";

changes the innerText of the button to 'Please Wait' instead of 'Submit'

Each line will works fine on it's own but when put together, the display of the loading spinner does not change from display:none to display: block. It seems that line

        document.getElementById("submitBtn").innerText = "Please Wait...";

causes

        document.getElementById("loader_mini").style.display = "block";

not to work.

1. I've tried switching the lines around which results in the same result.
2. I tried.style.visibility= "visible"; instead of display: block-> same result.
3. I also noticed that is taken out of the button element. The code works fine.
4. I tried switching browsers but it's the same result again (tried on chrome & firefox)

Does anyone have any ideas what the issue is? I'd really appreciate any help on this at all. The code seems pretty straight forward but i cant seem to see what's causing the issue.

 function activate_loading() { document.getElementById("loader_mini").style.display = "block"; document.getElementById("submitBtn").innerText = "Please Wait..."; }

 #loader_mini{ width: 20px; height: 20px; border: 2px solid blue; border-top: 2px solid white; border-left: 1px solid white; border-bottom: 0px solid white; border-radius: 50%; -webkit-animation: spin 1.2s linear infinite; animation: spin 1.2s linear infinite; display: none; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <form id="form" method="post" class="hide_<?=$sent_status_show?>" onsubmit="activate_loading()"> <label for="email">Email Address:</label> <input type="email" name="email"/> <br> <label for="subject">Email Subject:</label> <textarea name="subject"></textarea> <br> <button id="submitBtn" class="submitBtn" type="submit"> Submit <div id="loader_mini"> </div> </button> </form>

Answer 1

You have two problem with your code:

1. You don't stop form submit so you can't see any change because page change.

2. You need to add loader after change text else the Text will delete loader.

What i did?

Delete inline onchange and add a function directly (more "elegant" code), then i add event.preventDefault(); for stop submit. Next step is change position of element innerHTML (was innerText but change for add loader).

 form.onsubmit = function(event) { event.preventDefault(); activate_loading(); }; function activate_loading() { document.getElementById("submitBtn").innerHTML = "Please Wait...<div id='loader_mini'></div>"; document.getElementById("loader_mini").style.display = "block"; }

 #loader_mini{ width: 20px; height: 20px; border: 2px solid blue; border-top: 2px solid white; border-left: 1px solid white; border-bottom: 0px solid white; border-radius: 50%; -webkit-animation: spin 1.2s linear infinite; animation: spin 1.2s linear infinite; display: none; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <form id="form" method="post" class="hide_<?=$sent_status_show?>"> <label for="email">Email Address:</label> <input type="email" name="email"/> <br> <label for="subject">Email Subject:</label> <textarea name="subject"></textarea> <br> <button id="submitBtn" class="submitBtn" type="submit"> Submit </button> </form>

Answer 2

.innerText replaces all the content inside the button including the loader element.

That's why the loader disappear when you use innerText. The solution is to have two elements inside the button. One for the text and one for the loader. So when you use .innerText , you can use it on the text element instead of the whole button.