Question

34

Using jquery to monitor form field changes

rated 0 times [ 41] [ 7] / answers: 1 / hits: 36328 / 13 Years ago, fri, april 29, 2011, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

kennedi

Add To Favorites

Follow

Total Points: 702

Total Questions: 109

Total Answers: 111

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

kennedi questions

1 Bootstrap5 modal not displaying in React.js after clicking on the button

Fri, Dec 25, 20, 00:00, 4 Years ago

1 animate v-if with slide down/up transition (Vue.js 2)

Thu, Oct 15, 20, 00:00, 4 Years ago

1 createAsyncThunk from Redux Toolkit yields undefined payload when fetching data from Firebase

Sat, Jun 13, 20, 00:00, 4 Years ago

1 Is it possible to force Node.js to JIT compile code?

Sat, Dec 14, 19, 00:00, 5 Years ago

1 angular try catch vs catcherror

Mon, Dec 9, 19, 00:00, 5 Years ago

View All

answered 13 Years ago zachariaho · Accepted Answer

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.