How to display warning before leaving the web page with unsaved changes using JavaScript the following code will help you make before leaving the web page with unsaved changes.


#index.php

<!Doctype html>
<html>
    <head>
        <title>Warning before leave the page Javascript</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4"></div> 
                <div class="col-md-4" style="margin-top: 20px;">
                    <form class="form-horizontal" action="thepage_where_to_save.php" method="post">
                        <div class="form-group">
                            <label class="control-label" for="email">Email:</label>
                            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="pwd">Mobile:</label><br>
                            <input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default">Save</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-4"></div>
            </div>
        </div>
        <script>
            window.addEventListener("beforeunload", function(e) {
                var confirmationMessage = 'It looks like you have been editing something. ' + 'If you leave before saving, your changes will be lost.';
                (e || window.event).returnValue = confirmationMessage;
            });
        </script>
    </body>
</html>



Run the following code and see the results