Home
Topics
Laravel

Laravel
Livewire

Livewire
Software Testing

Testing
bootstrap

Bootstrap
source code

Code
HTML

HTML
CSS

CSS
Javascript

Javascript
jQuery

jQuery
Warn Users Before Leaving Web Pages Using JavaScript

Warn Users Before Leaving Web Pages Using JavaScript

Admin
Admin・ 28 Agustus 2021
4 min read ・ 4078 views

onbeforeunload Event - Have you ever, after inputting data that has taken a long time and with a large amount of text, then you press the wrong tab close? Things like this will certainly be very annoying and of course provoke our emotions. If the website already has an autosave feature, something like this will not be a problem, but if there is no autosave ?

There are several ways so that when we click the close tab it doesn't immediately exit the page, but there will be a warning such as a confirmation dialog. Well, in this article I will share how to display a warning or confirm dialog before leaving a web page with unsaved changes or inputs. To create a confirm dialog or warning like this, we can use the onbeforeunload event from javascript.

And the following is an example of how to use the onbeforeunload event to display a warning before leaving a web page with unsaved changes or input.

Example

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 = '';
});

To make a warning alert or confirm dialog display 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>

The script above is a script for a simple contact page. Try to enter some text in the available input fields, then try to refresh the page or click close tab, then there will be a warning or confirm dialog whether we want to continue to refresh the page or close the tab, with the consequence that if we continue to refresh the page or close the tab then the changes that have been made done will not be saved or will be lost.

Good luck, hopefully this article can be useful and see you in the next article. 👋 

 

Full Documentation: WindowEventHandlers.onbeforeunload

 

Credit: Web illustrations by Storyset

Javascript
Artikel Sebelumnya

Menampilkan Peringatan Sebelum Meninggalkan Halama...
Artikel Selanjutnya

Tutorial Cara Generate Unique Slug di Laravel 8
Tinggalkan Komentar
Loading Comments
Bookmark
Windows Linux Mac
Ctrl + D Ctrl + D ⌘ + D
Follow us
Favorit See All