Using jquery to monitor form field changes

Trying to learn some jquery to implement an autosave feature and need some assistance. I have some code to monitor the status of form fields to see if there has been any change. Everything works, but I need to only monitor the changes in a specific form, not all form inputs on the page. There is a search box and a newsletter form on the same page and when these form fields are changed, they are detected as well, which I need to filter out somehow or better yet, only target the specific form.

$(function(){
    setInterval("CheckDirty()",10000);
    $(':input').each(function() {
        $(this).data('formValues', $(this).val());
    });
});

function CheckDirty()
{
    var isDirty = false;

    $(':input').each(function () {
        if($(this).data('formValues') != $(this).val()) {
            isDirty = true;
        }
    });

    if(isDirty == true){
        alert("isDirty=" + isDirty);
    }
}

Answers


Just add a class to the form and use it to filter

$('.form :input').each(function() {
    $(this).data('formValues', $(this).val());
});

EDIT

Just a suggestion, you can attach the change event directly to the form

live demo here : http://jsfiddle.net/jomanlk/kNx8p/1/

<form>
    <p><input type='text'></p>
    <p><input type='text'></p>
    <p><input type='checkbox'></p>
</form>

<p><input type='text'></p>

<div id='log'></div>

$('form :input').change(function(){
   $('#log').prepend('<p>Form changed</p>')
});

You can easily improve this by adding a timer and making it save every xx seconds.


var $jq= jQuery.noConflict();
         $jq(function() {                       $jq('#extensibleForm').data('serialize',$jq('#extensibleForm').serialize());
 });


function formHasChanged(){
      if($jq('#extensibleForm').serialize()!=$jq('#extensibleForm').data('serialize')){
              alert("Data Changed....");
              return (false);
}
return true;
}

what's your form's id?

you just need to make your selector more specific :)

instead of $(':input').each(function() {

use

$('#yourFormId').find(':input').each(function() {

Here you can see it working: http://jsfiddle.net/paska/zNE2C/

$(function(){
    setInterval(function() {
        $("#myForm").checkDirty();
    },10000);
    $("#myForm :input").each(function() {
        $(this).data('formValues', $(this).val());
    });

    $.fn.checkDirty = function() {
        var isDirty = false;

        $(this).find(':input').each(function () {
            if($(this).data('formValues') != $(this).val()) {
                isDirty = true;
            }
        });

        if(isDirty == true){
            alert("isDirty=" + isDirty);
        }
    };
});

I think you can use a class to select the type of input you want.

<input class="savethis" ... />

Then in jQuery use this.

$(':input .savethis').each(function() { ...

You can specify an id attribute (say theForm) to your form element and then select only those input fields inside it.

then try selecting with

$(':input', '#theForm')

You can use the .change() function and then use $(this) to denote you want to work with just the field that is actively being changed.

$('#myForm input[type="text"]').change(function() {

    $(this)...

});

Edit: #myForm is your form ID so you can target a specific form. You can even specify just type="text" fields within that form, as in my example.


Need Your Help

java equivalent to php's hmac-SHA1

java php cryptography hmac

I'm looking for a java equivalent to this php call:

How to write an element just after another with javascript?

javascript element

I need to append an element onclick just after another (a textarea).