Tracking changes in the elements of a form

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


1

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://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/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>


2

How it works

The plugin will create a hash based on all form elements values. So, before leaving the page, the tracker will check if there area any changes in the hash. If the hash is different, the plugin will trigger a alert to the user. The nice of that is that the hash will change if new elements are added dynamically.

3

Methods

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