Codelapan
  • Home
  • Bootstrap
  • Codeigniter
  • Katalon
  • Laravel
    • Home
    Topics
    Laravel

    Laravel
    Livewire

    Livewire
    Software Testing

    Testing
    bootstrap

    Bootstrap
    source code

    Code
    HTML

    HTML
    CSS

    CSS
    Javascript

    Javascript
    jQuery

    jQuery

    Codelapan
    Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript

    Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript

    Admin
    Admin・ 28 Agustus 2021
    4 min read ・ 2534 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/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>

    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

    Javascript
    Artikel Sebelumnya

    How to Use Sweet Alert in Laravel 8
    Artikel Selanjutnya

    Warn Users Before Leaving Web Pages Using JavaScri...
    Tinggalkan Komentar
    Loading Comments
    Favorit See All