
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
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 67047 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32220 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31779 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28528 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27860 views