Detect if a form has unsaved changes before letting user focus to a different form
<p>Is there any way to detect if user has changed from the content of one section to another in the same page?</p>

<p>I have a page with multiple buttons (1 form/section is opened once you click on each button), when they all are closed i can detect user is changing to another form using a click event on the button element.</p>

<p><strong>My sections in this case are forms loaded when you click on every button in the page. pure jquery to load the content via ajax inside them.</strong></p>

<p>The problem is when all sections are open. I need to detect when user has changed between the content of one section to another.</p>

<p>I have to warn the user about saving your changes in a previous form because system has a timeout for inactivity, if user didnt save his data, it is lost once user gets logout from application.</p>

<p><em>the event prompt the user to save the data of the previous form.</em></p>

<p>The only way I can think of doing this is using a mouse event, but this can sometimes be a frustrating experience.</p>

<p><strong><em>Solved</em></strong></p>

<p>Thanks DelightedD0D, I ended up doing this</p>

<p>This var saves the previous form number</p>

<pre><code>var pendingForm = [];
</code></pre>

<p>Events which fire a possible warning</p>

<pre><code>//Pressing tab is reviewed if there are unsaved changes in the previous section.
$(document).keyup(function(eventTab) {
    var code = eventTab.keyCode || eventTab.which;
    if (code === 9) {
        checkPrevious(eventTab);
    }
});
//Clicking is reviewed if there are unsaved changes in the previous section
$(document).mouseup(function(eventMouse) {
    checkPrevious(eventMouse);
});
</code></pre>

<p>Here we establish when a form is pending or has changed</p>

<pre><code>$('.formSection').on('keyup change', 'input, select, textarea', function() {
  $(this).closest('.formSection').addClass('pending');
  //We get the number of the form by the id
  var numForm = $(this).closest('.formSection').attr('id').substr(11, 2);
  if ( $.inArray(numForm , pendingForm) == -1 ) {
    pendingForm.push(numForm);
  }
});

//I have my own functions to save and cancel, but the idea is Save the data
//then find the formSection from previous form, remove pending class and
//remove number form from array of pending sections
$('.save').click(function() {
  //save data...
  var numForm = pendingForm.pop();
  $('#formSection'+numForm).removeClass('pending');
});
</code></pre>

<p>And this function checks when user move to another form</p>

<pre><code>function checkPrevious(e) {
    var $target = $(e.target);
    //If it is clicked somewhere within a form or a button that opens a section
    if ($target.closest('.formSection').length || $target.hasClass('btnSection')) {
        var isDisabled = false;
        if (pendingForm.length &gt; 0) {
            prevForm = pendingForm.slice(-1).pop();
            //Every submit form button has an id with a consecutive number in my case
            //If disabled, that means it has errors in validation (Bootstrap)
            //**I have to improve this verification yet**
            isDisabled = $('#submitForm' + prevForm).is(':disabled');
        }

        // get any forms with changes that are not the current form or do not contain the clicked element
        var $otherFormsWithChanges = $('.pending').filter(function() {
            var $this = $(this);
            return $this.hasClass('pending') &amp;&amp; (!$this.is($target) || $this.has($target).length != 0);
        });
        // if another form has a change, thow up a message
        // allow the user to go back to the form or ignore the changes
        if ($otherFormsWithChanges.length &gt; 0 &amp;&amp; $otherFormsWithChanges.has($target).length === 0 ) {
            var modalPrev = $('#modalPrev');
            if ( isDisabled == false ) {
                //If everything is ok, we can save
                modalPrev.find('.modal-content .modal-body').html("&lt;p&gt;You have unsaved changes. Do you want to save previous form?&lt;/p&gt;");
                modalPrev.find(".btnSave").removeClass('hide');
            } else {
                modalPrev.find('.modal-content .modal-body').html("&lt;p&gt;You have some errors in your previous form.&lt;/p&gt;");
                modalPrev.find(".btnSave").addClass('hide');
            }
            $('#modalPrev').modal('show');
        }
    }
}
</code></pre>

<p>I show a modal instead of an alert with two buttons [Save] and [Cancel], every one has a function which do a save or close but both remove the previous section from the array to not be considered anymore.</p>