0

My goal is to disable "Login" button in my form, and also to show an animated GIF spinner

enter image description here

when a user begins submitting it either after a click on the "Login" button or after hitting the Enter key on the keyboard.

My HTML looks as such:

<form method="POST" action="login.php" autocomplete="off" id="frmLogin">
    <!-- other content -->
    <input type="submit" value="Login" id="btnLogin" onClick="onLoginClkd();">
        <img src="images/spnr.gif" id="imgSpnr" 
        style="width: 16px; height: 16px; visibility: hidden;">
</form>

<script language="javascript">
function onLoginClkd()
{
    var img_obj = document.getElementById("imgSpnr");
    var btn_obj = document.getElementById("btnLogin");
    if(img_obj != undefined)
        img_obj.style.visibility = "visible";
    if(btn_obj != undefined)
        btn_obj.disabled = true;

    var frm_obj = document.getElementById("frmLogin");
    if(frm_obj != undefined)
        frm_obj.submit();
}
</script>

This works just fine in Chrome and Firefox browsers, but in IE the spinner is displayed but it does not animate, or spin.

Any idea how to adjust it to make it work under IE?

PS. I'm testing it in the latest version of IE, whatever is available in Windows 8.1

PS2. I can't create a fiddle to illustrate this because I won't be able to imitate "stalling" php page that refuses to load immediately. And doing it via JavaScript in HTML does not reproduce the issue. I'm just hoping that someone else witnessed the same behavior.

c00000fd
  • 20,994
  • 29
  • 177
  • 400
  • This is a problem common in many browsers, for example Firefox. I faced out this same problem some weeks ago and the solution was not to dynamic create element with animated gif at form submit, but create it at `ready()` of the page, hiding it by default. At submit, I simply triggered its visibility. In this way, animated gif runs correctly also during reloading of the page – Luca Detomi Feb 02 '15 at 08:38
  • @LucaDetomi: Hmm. Interesting. My approach above seems to work in FF. You must have an older version. – c00000fd Feb 02 '15 at 08:56
  • well I have last version but... I used `display` property, you use `vibility` one, almost the same. – Luca Detomi Feb 02 '15 at 09:02
  • @LucaDetomi: The reason I used `visibility` instead of `display` is because it reserves the space for the IMG in the layout so the rest of the HTML doesn't "jump" when the spinner is displayed. – c00000fd Feb 02 '15 at 09:04
  • I understood this, I had the exaclty opposite problem, because I display animated gif as overlay. I just posted my complese solution in original question, linked at the top of yours. – Luca Detomi Feb 02 '15 at 09:30
  • @LucaDetomi: I appreciate the update. Wow. So much just to do that. You know, I don't think I want to do it just to fix the IE issue. I just tested the solution with most upvotes on that page and indeed it did not work for FF. But my original way of doing it posted here seems to work fine for most browsers except IE. So screw it. I can't image there's still someone out there who may be using that piece of garbage. It seems like even Microsoft hate it. (They will rename it into [Spartan](http://en.wikipedia.org/wiki/Spartan_(browser)) in Windows 10. Haha. Like if it changes anything...) – c00000fd Feb 02 '15 at 09:41
  • Thank you. I agree with you about IE, even if last versions are totally another thing respect older ones. Anywa,y to remain in topic, my solution, required many lines, it's true, but conceptually is very very easy to understand: 1) a css that styles overlay, 2) a jQuery that add this overlay hidden to all forms, and another one that toggle visiblity at submit. Advantages are that until now.... it runs correctly in ALL browsers I have tested, including Firefox desktop and mobile, IE9 and above, Chrome. :-) So, some rows, but finally without compromises. – Luca Detomi Feb 02 '15 at 09:46
  • @LucaDetomi: Thanks. I'll review it. In my book, the issue is that we don't know why it doesn't work. And if so, there's no way to guarantee that it would work when they release the next version of IE. – c00000fd Feb 02 '15 at 09:53
  • I think that the reason for which it does not work is that browsers tends to dedicate all resources to form submit and page reload instead to correctly continue to render DOM, and this includes also animation of gifs created during this period. For this reason, I opted for create it before, and then simply showing it, because in this way, it is already animated while hidden. Ok, this required few extra-resources because browser has to render it even if hidden but in actual systems.... I think that could be absolutely acceptable. – Luca Detomi Feb 02 '15 at 09:58

0 Answers0