1

I have a test form that displays a warning message when the user attempts to leave a form with unsaved data.

I used jquery onbeforeunload.

The issue I have is that on the form cancel buttton there is a showProgressAnimation() call to display a please wait icon while the page does its thing. I have attached the showProgressAnimation() call to the cancel button and this is triggered whenever the cancel button is called - even when the user request to stay on the form.

How do I trigger call the showProgressAnimation() when the user clicks on the "Leave this Page' button of the pop up generated by the onbeforeunload but is also called / triggerd when the form is correctly submitted (when the 'Leave this Page' pop up is not called)?

Here is my form code:

<form id="achievement_details_form" class="form-horizontal" method="post">

    .........culled for brevity..........

    <a href="{% url 'achievement_details' %}" class="btn" onclick="showProgressAnimation();">Cancel</a>

</form>

Here is my form script:

<script>
    function showProgressAnimation() {
        $("#loading-div-background").show();
    }

    window.onbeforeunload = function(){
        return 'You have unsaved changes!';
    };
</script>
user4307426
  • 246
  • 2
  • 3
  • 9
  • The only thing that `onbeforeunload` can do is return a string that will be in the prompt. You can't do any other interaction. – Barmar Feb 06 '15 at 02:22
  • onbeforeunload is a tricky event. If you want to disable the trigger of onbeforeunload on links - you will have to disable it [like this](http://stackoverflow.com/questions/7650063/how-can-i-prevent-window-onbeforeunload-from-being-triggered-by-javascript-href). Also you need to preserve 'beforeunload' eventhandler in `$(window).data(....)` as in link above. showProgressAnimation() is your own thing you can trigger it when you require. Your requirement (in the bold) is too long of an ambiguous sentence to understand. Please break it in points so that we can try to help. – amitthk Feb 06 '15 at 02:43
  • in the `window.onbeforeunload = function() {` can I place a condition to handle if the user clicks the `Leave this Page` button - such as `if true {showProgressAnimation();}` ? – user4307426 Feb 06 '15 at 04:28

0 Answers0