Блог

Пытаюсь изучить jquery для реализации функции автосохранения и нуждаюсь в некоторой помощи. У меня есть некоторый код для отслеживания состояния полей формы, чтобы увидеть, произошли ли какие-либо изменения. Все работает, но мне нужно отслеживать изменения только в определенной форме, а не во всех входных данных формы на странице. На одной странице есть окно поиска и форма рассылки новостей, и когда эти поля формы изменены, они также обнаруживаются, которые мне нужно как-то отфильтровать или, что еще лучше, настроить таргетинг только на определенную форму.

 $(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);
    }
}
  

Просто добавьте класс в форму и используйте его для фильтрации

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

Редактировать

Просто предложение, вы можете прикрепить событие изменения непосредственно к форме

живая демо — версия здесь: 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>')
});
  

Вы можете легко улучшить это, добавив таймер и сделав так, чтобы он сохранялся каждые xx секунд.

 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;
}
  

какой идентификатор вашей формы?

вам просто нужно сделать ваш селектор более конкретным 🙂

вместо $(':input').each(function() {

использование

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

Вы можете использовать .change() функцию, а затем использовать $(this) для обозначения того, что вы хотите работать только с полем, которое активно изменяется.

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

    $(this)...

});
  

Редактировать: #myForm — это ваш идентификатор формы, поэтому вы можете настроить таргетинг на определенную форму. Вы даже можете указать просто поля type=»text» внутри этой формы, как в моем примере.

Здесь вы можете увидеть, как это работает: 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);
        }
    };
});
  

Я думаю, вы можете использовать класс, чтобы выбрать тип ввода, который вы хотите.

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

Затем в jQuery используйте это.

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

Вы можете указать атрибут id (скажем theForm ) для вашего элемента формы, а затем выбрать только те поля ввода внутри него.

затем попробуйте выбрать с

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

Я уважаю все рабочие ответы, но для меня, я думаю, использование focus события может быть намного лучше, чем change event. Вот как я выполнил свою функцию watchChange () на JS:

  var changeInterval = 0;
 var changeLength = 0; //the length of the serverData
 var serverData = {value:''}; //holds the data from the server
 var fieldLength = 0; //the length of the value of the field we are tracking
 var frequency = 10000;

  function watchChange() {
    $input.on('focus', function() {
    var $thisInput = $(this);

    //we need the interval value so that we destroy
    //setInterval when the input loses focus.
    changeInterval = setInterval(function() {

        changeLength = serverData.value.length;
        fieldLength = $thisInput.val().length;

        //we only save changes if there is any modification
        if (changeLength !== fieldLength) {
            $.ajax({
                url: 'path/to/data/handler',
                dataType: 'json',
                data: "data="   $thisInput.val(),
                method: 'post'
            }).done(function(data) {
                serverData = data;
            }); //end done
        } //end if

    }, frequency); //end setInterval

    //and here we destroy our watcher on the input
    //when it loses focus
}).on('blur', function() {
    clearInterval(changeInterval);
});

}
  

Хотя этот подход кажется наивным, но он дал мне то, что я хотел!