Question

尝试学习一些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);
    }
}

Answer 1

只需在表单中添加一个类并使用它来过滤

$('.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秒保存一次来轻松改进。

Answer 2

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

Answer 3

你的表格是什么？

你只需要让你的选择器更具体：）

而不是$(':input').each(function() {

使用

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

Answer 4

在这里你可以看到它有效：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);
        }
    };
});

Answer 5

我认为您可以使用类来选择所需的输入类型。

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

然后在jQuery中使用它。

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

Answer 6

您可以为表单元素指定id属性（比如说theForm），然后只选择其中的输入字段。

然后尝试选择

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

Answer 7

您可以使用.change()功能，然后使用$(this)表示您只想使用正在更改的字段。

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

    $(this)...

});

编辑：#myForm是您的表单ID，因此您可以定位特定表单。您甚至可以在该表单中指定type =“text”字段，如我的示例所示。

Answer 8

我尊重所有有效的答案，但对我而言，我认为使用 focus 事件可能比 change 事件好得多。这就是我在 JS 中完成 watchChange() 函数的方式：

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

}

尽管这种方法看起来很幼稚，但它给了我想要的东西！

使用jquery监视表单字段更改

8 个答案: