Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript

Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript

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

onbeforeunload Event - Pernah ngga sih, setelah input data yang telah memakan waktu yang lama dan dengan jumlah text yang sudah sekian banyaknya, kamu malah salah menekan close tab ? Hal seperti ini tentu akan sangat menyebalkan dan tentu saja memancing emosi kita. Jika web yang sudah terdapat fitur autosave, tentu hal seperti tidak masalah, tapi jika tidak ada autosave, bagaimana ?

Ada beberapa cara agar ketika kita klik close tab tidak langsung keluar halaman, tapi akan ada semacam dialog konfirmasi. Nah, di artikel ini saya akan membagikan cara untuk menampilkan peringatan atau warning alert sebelum meninggalkan halaman web dengan perubahan atau inputan yang belum disimpan. Untuk membuat confirm dialog atau warning alert seperti ini, kita bisa menggunakan evenr onbeforeunload dari javascript.

Dan berikut ini adalah contoh bagaimana cara menggunakan onbeforeunload event untuk menampilkan peringatan atau warning alert sebelum meninggalkan halaman web dengan perubahan atau inputan yang belum disimpan.

Contoh

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

Untuk membuat menampilkan warning alert atau confirm dialog ketika user melakukan muat ulang halaman atau close tab menggunakan javascript, kita bisa menggunakan window.addEventListener() dan beforeunload event seperti script di atas. Jadi jika diimplementasikan di halaman seperti halaman contact, kurang lebih scriptnya seperti di bawah ini.

<!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/[email protected]/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/[email protected]/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>

Script di atas merupakan script untuk halaman contact sederhana. Cobalah menginputkan beberapa text pada input fields yang tersedia, kemudian coba refresh halaman atau klik close tab, maka akan ada peringatan atau confirm dialog apakah kita ingin melanjutkan refresh halaman atau close tab, dengan konsekuensi jika tetap melanjutkan refresh halaman atau close tab maka perubahan yang ada atau yang telah dilakukan tidak akan disimpan.

Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. 👋 

 

Full Documentation: WindowEventHandlers.onbeforeunload

 

Credit: Web illustrations by Storyset

Tinggalkan Komentar
Loading Comments