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

在jQuery中，是否有一种简单的方法来testing表单的任何元素是否已经改变？

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

编辑：对不起，我真的应该是更具体的！ 说我有一个表格，我有一个button，具有以下内容：

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

如果表单在加载后发生了变化，我将如何testing？

Answer 1

你可以这样做：

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

这个绑定的change事件处理程序的inputforms，如果他们改变它使用.data()设置changed值为true ，然后我们只是检查点击这个值，这假定#mybutton是在forms（如果不是用$('#myForm') ）replace$(this).closest('form') $('#myForm') ），但是可以使它更通用，如下所示：

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

参考文献：更新

根据jQuery，这是一个筛选器来select所有的表单控件。

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

inputselect器基本上select所有表单控件。

Answer 2

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

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

Answer 3

一个实时和简单的解决scheme：

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

Answer 4

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

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

编辑

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

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

编辑＃2

好的，你可以设置一个全局variables，像这样改变之后：

 var FORM_HAS_CHANGED = false; $('#mybutton').click(function() { if (FORM_HAS_CHANGED) { // The form has changed } }); $("input, select").change(function(){ FORM_HAS_CHANGED = true; }); 

Answer 5

看更新的问题尝试类似

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

对于原来的问题使用类似的东西

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

Answer 6

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

Answer 7

这是一个优雅的解决scheme。

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

• 对于text/textarea它是defaultValue
• select它的默认 select
• 对于checkbox/radio它是defaultChecked

这里是例子。

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

现在只需循环显示页面上的表单，并且您应该看到默认情况下禁用提交button，只有在确实会更改表单上的某些input值时才会激活提交button。

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

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

Answer 8

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

Answer 9

扩展Udi的答案，这只会检查表单提交，而不是每个input更改。

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

Answer 10

首先，我会在窗体中添加一个隐藏的input来跟踪窗体的状态。 然后，我会使用这个jQuery代码片段来设置隐藏input的值，当表单上的东西改变时：

  $("form") .find("input") .change(function(){ if ($("#hdnFormChanged").val() == "no") { $("#hdnFormChanged").val("yes"); } }); 

点击button后，可以检查隐藏input的状态：

 $("#Button").click(function(){ if($("#hdnFormChanged").val() == "yes") { // handler code here... } }); 

Answer 11

除了上面@ JoeD的回答。

如果您想要以特定forms（假设有多个表单）的字段而不是字段来定位字段，则可以使用以下代码：

 $('form[name="your_form_name"] input, select').click(function(){ // A form element was clicked });