
Warn Users Before Leaving Web Pages Using JavaScript

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
- Belajar Javascript: Mengenal Variabel dan Tipe Data pada Javascript
- Cara Membuat Autocomplete Input dengan HTML
- Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript
- Mengenal 3 Macam Jendela Dialog pada Javascript, Selengkapnya di Sini!
- Cara Instal VS Code di Linux yang Perlu Anda Ketahui
- Mendapatkan Nilai Berdasarkan Radio Button Yang Dipilih Menggunakan jQuery
- Cara Membuat Show and Hide Password dengan jQuery
- Navbar on Scroll, Membuat Animasi Navbar Saat Scroll Up & Scroll Down
- Membuat Bottom Navbar Seperti Instagram Dengan Bootstrap 5
- Cara Membuat Animasi Mengetik Teks Dengan CSS dan Javascript
Windows | Linux | Mac |
---|---|---|
Ctrl + D | Ctrl + D | ⌘ + D |
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 23623 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 19563 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 17100 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 13291 views
- Panduan Lengkap Cara Membuat Blog dengan Laravel 8 dan Bootstrap 30 Juli 2021 11041 views