CODEWITHSUNDEEP
javascriptpopup
Graham Slick
Graham Slick

Reputation: 6870

Js popup when leaving page but not when submitting form

I use this code on my website to display a warning message in a popup when a user trie to leave the page:

<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {

    return "Si vous quittez ou actualisez la page, vous perdrez votre tutoriel";
  }
</script>

However, this is on a page with a form. When the user submits the form, the popup appears which doesn't make sense. How can I modify this code so the popup appears only when the user leaves the page in every way possible (close the tab, clicks on site logo, refresh the page) but not when submitting the form ?

Upvotes: 1

Views: 916

Answers (1)

Anthony Blackshaw
Anthony Blackshaw

Reputation: 2549

I would suggest capturing the submit event for the form and then either removing the confirmExit function from your onbeforeunload event binding or setting a flag to indicate that the page can be submitted. For example:

<script type="text/javascript">

    // Define flag to determine if the page can be left without confirmation
    var safeToLeave = false;

    // Handle user leaving the page
    function handleExit () {
        if (!safeToLeave) {
            return 'Si vous quittez ou actualisez la page, vous perdrez votre tutoriel';
        }
    }

    // Handle the user submitting the page form
    function handleSubmission() {
        safeToLeave = true;
    }

    // Bind to on evemts
    window.onbeforeunload = handleExit;
    document.getElementById('#my-form').onsubmit = handleSubmission;

</script>

I'd recommend you consider using the addEventListener method for binding events in general, however given your example I've tried to keep my answer consistent.

Upvotes: 3

Related Questions