你如何处理jQuery中的表单更改？

Question

在jQuery中,是否有一种简单的方法可以测试表单元素的任何变化？

编辑:我应该补充一点,我只需要检查一个click()事件.

编辑:对不起我真的应该更具体!假设我有一个表单,我有一个按钮,其中包含以下内容:

$('#mybutton').click(function() {
  // Here is where is need to test
  if(/* FORM has changed */) {
     // Do something
  }
});

我如何测试表单自加载后是否已更改？

Answer 1

你可以这样做:

$("form :input").change(function() {
  $(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

该钻机一个change事件处理程序的形式输入,如果其中任何变更使用.data()设定changed值true,那么我们就检查在点击该值,这个假设#mybutton的形式里(如果不只是更换$(this).closest('form')同$('#myForm'))但你可以使它更通用,像这样:

$('.checkChangedbutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

参考文献:更新

根据jQuery,这是一个选择所有表单控件的过滤器.

http://api.jquery.com/input-selector/

:输入选择器基本上选择所有表单控件.

Answer 2

如果要检查表单数据(将要发送到服务器)是否已更改,可以在页面加载时序列化表单数据并将其与当前表单数据进行比较:

$(function() {

    var form_original_data = $("#myform").serialize(); 

    $("#mybutton").click(function() {
        if ($("#myform").serialize() != form_original_data) {
            // Something changed
        }
    });

});

Answer 3

一个实时而简单的解决方案:

$('form').on('keyup change paste', 'input, select, textarea', function(){
    console.log('Form changed!');
});

Answer 4

您可以使用多个选择器将回调附加到任何表单元素的change事件.

$("input, select").change(function(){
    // Something changed
});

编辑

既然你提到你只需要点击一下,你可以简单地修改我的原始代码:

$("input, select").click(function(){
    // A form element was clicked
});

编辑#2

好的,你可以设置一个像这样改变后设置的全局:

var FORM_HAS_CHANGED = false;

$('#mybutton').click(function() {
    if (FORM_HAS_CHANGED) {
        // The form has changed
    }
});

$("input, select").change(function(){
    FORM_HAS_CHANGED = true;
});