DEV Community

Cover image for Warn Users Before Leaving Web Pages Using JavaScript
Hilmi
Hilmi

Posted on Originally published at codelapan.com

Warn Users Before Leaving Web Pages Using JavaScript

#javascript 
window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
  // Chrome requires returnValue to be set
  e.returnValue = '';
});
Enter fullscreen mode Exit fullscreen mode

To display a warning or confirm dialog when the user reloads the page or closes a tab using javascript, we can use window.addEventListener() and beforeunload events like the script above. So if it is implemented on a page such as a contact page, the script is more or less like below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>
      display warning before leaving the web page with unsaved changes using
      JavaScript
    </title>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <h1 class="text-center fs-5">
          display warning before leaving the web page with unsaved changes using
          JavaScript
        </h1>
        <div class="card mt-3">
            <div class="card-body">
                <form>
                <div class="mb-3">
                    <label for="name" class="form-label">Your Name</label>
                    <input type="text" class="form-control" id="name">
                </div>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1">
                </div>
                <div class="mb-3">
                    <label for="subject" class="form-label">Subject</label>
                    <input type="text" class="form-control" id="subject">
                </div>
                <div class="mb-3">
                    <label for="message" class="form-label">Message</label>
                    <textarea id="message" cols="30" rows="10" class="form-control"></textarea>
                </div>

                <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>

      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <script>
      window.addEventListener("beforeunload", function (e) {
        // Cancel the event
        e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
        // Chrome requires returnValue to be set
        e.returnValue = "";
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Don't forget to visit codelapan.com for other posts about web development or web design.

Credit: Web illustrations by Storyset

Top comments (0)