JS Attach event to browser stop button

Question

Say I have an HTML form on a page with a submit button. I've attached some logic to the form submit event to change the display to show a loading icon (in addition to posting the form to the server). However, if I press escape or click the browser's stop button, the submission event will stop but right now, the loading icon won't go away.

Is it possible to attach some JS logic to the "form interrupt" event to then clear the loading icon?

window.onabort looks as though it may have been designed for this purpose, but it doesn't appear to have any browser support.

Solutions which use either JQuery or plain vanilla JS are fine.

Edit to with clarifying code example

<form action="/myServerRoute" method="post">
  <input type="submit" value="Submit form" onclick="DisplayLoadingAnimation();" />
 </form>

<script>
    function DisplayLoadingAnimation() {
      alert('Imagine this manipulates the DOM to render loading elements.');
    }
  
    function HideLoadingAnimation() {
      alert('Imagine this manipulates the DOM to clear loading elements.');  
    }
</script>

Imagine I click the "Submit form" button but then press the browser's stop button before the server can respond. How can I make it so that HideLoadingAnimation is executed when this happens?

What have you written so far? This isn't a "write my code for me" kinda place. You provide what you tried, then you say where you're stuck, and then kinda and friendly coders may help you. — SoluableNonagon, Jul 05 '16 at 20:59
@SoluableNonagon I understand that this isn't a "write my code for me" place. IMO, my question is about whether whether browser JS exposes eventHandler X for purpose Y. I could list out various event handlers which are obviously unrelated to my above question and tell you how trying those event handlers didn't solve my problem but I don't think that would be useful. — Jacob Horbulyk, Jul 05 '16 at 21:07
The main reason people downvote or don't provide help is because they don't see any code. Can you provide the code that runs when you hit the escape key for example? Then people can say, oh hey! Here's where you should do so and so. — SoluableNonagon, Jul 05 '16 at 21:09
I'll put together a very generic answer since I don't know what you have. — SoluableNonagon, Jul 05 '16 at 21:10
I take it you want to know when the user has canceled the current page load? — Greg Burghardt, Jul 05 '16 at 21:22

SoluableNonagon · Answer 1 · 2016-07-05T21:28:59.323

The basic structure for something like this is. When button is clicked, register a listener for keypress on the document ( make sure to remove it later if it is not needed ). The keypress event can check for which key is pressed ( you can add the code ) and then modify the html appropriately. Then if the key is pressed the listener should be removed.

There isn't a cross browser way to determine the stop button was clicked. IE has onstop event though, webkit doesn't support this.

    function mySubmit( event ){
        event.preventDefault();
        document.querySelector('button').innerHTML = "Loading";
        
        listenForEscapeAndStop();

    }

    function listenForEscapeAndStop(){
      
        var reference = document.addEventListener("keyup", function(){
            document.querySelector('button').innerHTML = "My Button";
            document.removeEventListener("keyup", reference);
              
        });
      
        document.onstop = function(){ // IE only
            document.querySelector('button').innerHTML = "My Button";
        };
    }

    <button onclick='mySubmit( event )'> My Button </button>

This attaches to the escape key press (which is half of what I asked) but doesn't attach to the browser stop button (which IMO is the more difficult part). — Jacob Horbulyk, Jul 05 '16 at 21:20
added onstop function. But note, it only works in IE. There isn't another way to determine that the user clicked the stop button. — SoluableNonagon, Jul 05 '16 at 21:23
"added onstop function. But note, it only works in IE. There isn't another way to determine that the user clicked the stop button." is the question answer that I am looking for. — Jacob Horbulyk, Jul 05 '16 at 21:28

JS Attach event to browser stop button

1 Answers1