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

How do you handle a form change in jQuery?

提问by mike

In jQuery, is there a simple way to test if ANY of a form's elements have changed?

在 jQuery 中，是否有一种简单的方法来测试表单的任何元素是否已更改？

EDIT:I should have added that I only need to check on a click()event.

编辑：我应该补充说我只需要检查一个click()事件。

EDIT:Sorry I really should have been more specific! Say I have a form and I have a button with the following:

编辑：对不起，我真的应该更具体！假设我有一个表单，并且有一个按钮，其中包含以下内容：

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

How would I test if the form has changed since it was loaded?

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

回答by Nick Craver

You can do this:

你可以这样做：

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

This rigs a changeevent handler to inputs in the form, if any of them change it uses .data()to set a changedvalue to true, then we just check for that value on the click, this assumes that #mybuttonis inside the form (if not just replace $(this).closest('form')with $('#myForm')), but you could make it even more generic, like this:

这将change事件处理程序绑定到表单中的输入，如果其中任何一个更改它用于.data()将changed值设置为true，那么我们只需在单击时检查该值，这假设它#mybutton在表单内（如果不只是替换$(this).closest('form')为$('#myForm')），但你可以让它更通用，像这样：

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

References:Updated

参考：更新

According to jQuery this is a filter to select all form controls.

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

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

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

The :input selector basically selects all form controls.

:input 选择器基本上选择所有表单控件。

回答by Udi

If you want to check if the form data, as it is going to be sent to the server, have changed, you can serialize the form data on page load and compare it to the current form data:

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

$(function() {

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

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

});

回答by Marcio Mazzucato

A real time and simple solution:

一个实时且简单的解决方案：

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

回答by Joe D

You can use multiple selectors to attach a callback to the change event for any form element.

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

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

EDIT

编辑

Since you mentioned you only need this for a click, you can simply modify my original code to this:

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

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

EDIT #2

编辑#2

Ok, you can set a global that is set once something has been changed like this:

好的，您可以设置一个全局设置，一旦某些内容发生更改，则设置如下：

var FORM_HAS_CHANGED = false;

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

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

回答by Pez Cuckow

Looking at the updated question try something like

查看更新的问题尝试类似

$('input, textarea, select').each(function(){
    $(this).data("val", $(this).val());
});
$('#button').click(function() {
    $('input, textarea, select').each(function(){
        if($(this).data("val")!==$(this).val()) alert("Things Changed");
    });
});

For the original question use something like

对于原始问题，请使用类似

$('input').change(function() {
    alert("Things have changed!");
});

回答by VoteyDisciple

$('form :input').change(function() {
    // Something has changed
});

回答by Developer

Here is an elegant solution.

这是一个优雅的解决方案。

There is hidden property for each input element on the form that you can use to determine whether or not the value was changed. Each type of input has it's own property name. For example

表单上的每个输入元素都有一个隐藏属性，您可以使用它来确定值是否已更改。每种类型的输入都有自己的属性名称。例如

• for text/textareait's defaultValue
• for selectit's defaultSelect
• for checkbox/radioit's defaultChecked

• 因为text/textarea它是默认值
• 因为select它是defaultSelect
• 因为checkbox/radio它是defaultChecked

Here is the example.

这是示例。

function bindFormChange($form) {

  function touchButtons() {
    var
      changed_objects = [],
      $observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');

    changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
      var
        $input = $(this),
        changed = false;

      if ($input.is('input:text') || $input.is('textarea') ) {
        changed = (($input).prop('defaultValue') != $input.val());
      }
      if (!changed && $input.is('select') ) {
        changed = !$('option:selected', $input).prop('defaultSelected');
      }
      if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
        changed = (($input).prop('defaultChecked') != $input.is(':checked'));
      }
      if (changed) {
        return $input.attr('id');
      }

    }).toArray();

    if (changed_objects.length) {
      $observable_buttons.removeAttr('disabled')   
    } else {
      $observable_buttons.attr('disabled', 'disabled');
    }
  };
  touchButtons();

  $('input, textarea, select', $form).each(function () {
    var $input = $(this);

    $input.on('keyup change', function () {
      touchButtons();
    });
  });

};

Now just loop thru the forms on the page and you should see submit buttons disabled by default and they will be activated ONLY if you indeed will change some input value on the form.

现在只需循环浏览页面上的表单，您应该会看到默认情况下禁用提交按钮，并且只有当您确实要更改表单上的某些输入值时，它们才会被激活。

$('form').each(function () {
    bindFormChange($(this));
});

Implementation as a jQueryplugin is here https://github.com/kulbida/jmodifiable

作为jQuery插件的实现在这里https://github.com/kulbida/jmodifiable

回答by Péter Tajti

var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
   var newformStr = JSON.stringify($("#form").serializeArray());
   if (formStr != newformStr){
      ...
         formChangedfunct();
      ...
   }
   else {
      ...
         formUnchangedfunct();
      ...
   }
}

回答by Ruby Racer

Extending Udi's answer, this only checks on form submission, not on every input change.

扩展 Udi 的答案，这只检查表单提交，而不是每次输入更改。

$(document).ready( function () {
  var form_data = $('#myform').serialize();
  $('#myform').submit(function () {
      if ( form_data == $(this).serialize() ) {
        alert('no change');
      } else {
        alert('change');
      }
   });
});

回答by Sarfraz

You need jQuery Form Observeplugin. That's what you are looking for.

您需要jQuery Form Observe插件。这就是你要找的。