I have a button that submits a form. When someone clicks it I want to disable it and I want a little loading icon to appear inside of it. The following code works in all browsers but Safari.
<button type="submit" class="btn btn-primary" id="submit_button" onclick="javascript:document.getElementById('loadinggif').style='height:20px;';
document.getElementById('thetext').style='display:none';
document.getElementById('submit_button').className='btn btn-primary some-class disabled';">
<div id="thetext">Submit Form</div><img id="loadinggif" class="img-responsive center-block" src="/img/loading.gif" style="display:none;height:20px;"></button>
In Safari, the above code causes the button to 'freeze' as the form is submitting and does not execute any of the javascript.
I have tried all possible combinations: I moved the javascript into a function, I added and removed the javascript: prefix and appended return true; or return false; to the end of the javascript (inline or in a function), I even tried to submit the form from within the javascript itself. Nothing worked (on Safari).
UPDATE
If I remove the form submit, the button css changes work. For some reason style changes in combination with submitting a form does not work on Safari. I also tried it with JQuery and same issue.
