jquery
  1. jquery-unload
PreviousNext

JQuery unload()

JQuery unload() is a method that allows you to perform certain actions when a page is unloaded or refreshed. It is often used to save important data or perform clean up actions before a user leaves the page.

Syntax

The syntax for using unload() in JQuery is as follows:

$(window).unload(function() {
  // code to be executed when the page is unloaded
});

Use

unload() is useful when you need to perform certain actions when the user is leaving your page. For example, you may want to save form data or other user inputs before the page is unloaded. unload() gives you an opportunity to run code before the user leaves the page.

Example

$(window).unload(function() {
  // Save form data to server
  $.post("/save-data", $("#my-form").serialize());
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Unload Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <form id="myForm">
        <!-- Your form fields go here -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <!-- Add other form fields as needed -->

        <button type="submit">Submit</button>
    </form>

    <script>
        // Use $(document).ready() to ensure the DOM is fully loaded before executing the script
        $(document).ready(function() {
            // Variable to track whether the form has been modified
            let formModified = false;

            // Event handler for form changes
            $("#myForm").on("change input", function() {
                formModified = true;
            });

            // Event handler for form submission
            $("#myForm").submit(function(event) {
                // Add your code to save the form data to the server here
                // For example, you can use AJAX to send the data to the server

                // Reset the formModified flag after successfully saving the data
                formModified = false;
            });

            // Event handler for page unload
            $(window).on("beforeunload", function() {
                if (formModified) {
                    return "You have unsaved changes. Are you sure you want to leave?";
                }
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we use unload() to capture any changes made to a form and save that data to the server before the page is unloaded.

Summary

JQuery unload() is a useful method for performing certain actions before a user leaves your page. It provides an opportunity to save data or perform clean up actions, ensuring that your page is left in a clean and functional state. Consider using unload() in your next JQuery project to improve the user experience.

load()Traversing Introduction
Published on: