Tracking changes in the elements of a form

Alert the user for unsaved changes in a form before leaving the page. Are you sure?

How it works

The plugin will create a hash based on all form elements values. Before the user leaves the page, the tracker will check for any changes in the hash. If the hash is different, the plugin will trigger an alert to the user.

NOTE: The alert will includes any dynamic new fields added to the form.

Examples

Please consider the following form example. If the user tries to leave the page without saving, the tracking will alert for unsaved changes. If you click save, the tracker will reset and start the tracking again.

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<form id='myForm'>
<div class='section-container'>

    <div class='row'>
        <div class='column'>
            <div class='form-group'>
                <label>Name</label><br>
                <input type='text' name='name' value='Roger Fredson'>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='column'>
            <div class='form-group'>
                <label>Profession</label><br>
                <input type='text' name='profession' value='Singer'>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='column'>
            <div class='form-group'>
                <label>Gender</label><br>
                <select name='gender'><option value="1">Male</option><option value="2">Female</option></select>
            </div>
        </div>
    </div>

    <br>

    <div class='row'>
        <div class='column'>
            <div class='form-group'>
                <input type='button' value='Save profile' onclick='myTracker.resetTracker()'>
            </div>
        </div>
    </div>

</div>
</form>

<script>
var myTracker = jSuites.tracker(document.getElementById('myForm'));
</script>

</html>

Methods

Method	Description
resetTracker();	Start tracking again
isChanged();	Check if the form is changed
setIgnore(status);	Enable or disable the tracking

Edit this page on GitHub