blocks|key|1800848|text|如果您想检查表单数据是否发生了更改，您可以在页面加载时序列化表单数据，并将其与当前表单数据进行比较：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1800849|$(function()+{

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

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

});|code-block|syntax|javascript|1800850|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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:</p>

<pre><code>$(function() {

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

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

});
</code></pre>


blocks|key|2014599|text|一个实时而简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2014600|$('form').on('keyup+change+paste',+'input,+select,+textarea',+function(){
++++console.log('Form+changed!');
});|code-block|syntax|javascript|2014601|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A real time and simple solution:</p>

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


blocks|key|2014369|text|查看更新后的问题，尝试如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2014370|$('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");
++++});
});|code-block|syntax|javascript|2014371|对于原始问题，请使用以下内容|2014372|$('input').change(function()+{
++++alert("Things+have+changed!");
});|2014373|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Looking at the updated question try something like</p>

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

<p>For the original question use something like</p>

<pre><code>$('input').change(function() {
    alert("Things have changed!");
});
</code></pre>


blocks|key|1800567|text|$('form+:input').change(function()+{
++++//+Something+has+changed
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1800568|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|2014775|text|var+formStr+=+JSON.stringify($("#form").serializeArray());
...
function+Submit(){
+++var+newformStr+=+JSON.stringify($("#form").serializeArray());
+++if+(formStr+!=+newformStr){
++++++...
+++++++++formChangedfunct();
++++++...
+++}
+++else+{
++++++...
+++++++++formUnchangedfunct();
++++++...
+++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2014776|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1800936|text|扩展Udi的答案，这只检查表单提交，而不是每次输入更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1800937|$(document).ready(+function+()+{
++var+form_data+=+$('#myform').serialize();
++$('#myform').submit(function+()+{
++++++if+(+form_data+==+$(this).serialize()+)+{
++++++++alert('no+change');
++++++}+else+{
++++++++alert('change');
++++++}
+++});
});|code-block|syntax|javascript|1800938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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


blocks|key|2014698|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2014699|$('form[name="your_form_name"]+input,+form[name="your_form_name"]+select').click(function()+{
++$("#result").html($(this).val());
});|code-block|syntax|javascript|2014700|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form+"your_form_name"</h2>
<form+name="your_form_name">
++<input+type="text"+name="one_a"+id="one_a"+value="AAAAAAAA"+/>
++<input+type="text"+name="one_b"+id="one_b"+value="BBBBBBBB"+/>
++<input+type="text"+name="one_c"+id="one_c"+value="CCCCCCCC"+/>
++<select+name="one_d">
++++<option+value="111111">111111</option>
++++<option+value="222222">222222</option>
++++<option+value="333333">333333</option>
++</select>
</form>
<hr/>
<h2>Form+"your_other_form_name"</h2>
<form+name="your_other_form_name">
++<input+type="text"+name="two_a"+id="two_a"+value="DDDDDDDD"+/>
++<input+type="text"+name="two_b"+id="two_b"+value="EEEEEEEE"+/>
++<input+type="text"+name="two_c"+id="two_c"+value="FFFFFFFF"+/>
++<input+type="text"+name="two_d"+id="two_d"+value="GGGGGGGG"+/>
++<input+type="text"+name="two_e"+id="two_f"+value="HHHHHHHH"+/>
++<input+type="text"+name="two_f"+id="two_e"+value="IIIIIIII"+/>
++<select+name="two_g">
++++<option+value="444444">444444</option>
++++<option+value="555555">555555</option>
++++<option+value="666666">666666</option>
++</select>
</form>
<h2>Result</h2>
<div+id="result">
++<h2>Click+on+a+field..</h2>
</div>|2014701|2014702|除了上面的@JoeD的答案。|2014703|如果您希望将特定表单(假设有多个表单)中的字段作为目标，而不仅仅是字段，则可以使用以下代码：|2014704|$('form[name="your_form_name"]+input,+form[name="your_form_name"]+select').click(function()+{
++++//+A+form+element+was+clicked
});|2014705|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
  $("#result").html($(this).val());
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;h2&gt;Form "your_form_name"&lt;/h2&gt;
&lt;form name="your_form_name"&gt;
  &lt;input type="text" name="one_a" id="one_a" value="AAAAAAAA" /&gt;
  &lt;input type="text" name="one_b" id="one_b" value="BBBBBBBB" /&gt;
  &lt;input type="text" name="one_c" id="one_c" value="CCCCCCCC" /&gt;
  &lt;select name="one_d"&gt;
    &lt;option value="111111"&gt;111111&lt;/option&gt;
    &lt;option value="222222"&gt;222222&lt;/option&gt;
    &lt;option value="333333"&gt;333333&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;hr/&gt;
&lt;h2&gt;Form "your_other_form_name"&lt;/h2&gt;
&lt;form name="your_other_form_name"&gt;
  &lt;input type="text" name="two_a" id="two_a" value="DDDDDDDD" /&gt;
  &lt;input type="text" name="two_b" id="two_b" value="EEEEEEEE" /&gt;
  &lt;input type="text" name="two_c" id="two_c" value="FFFFFFFF" /&gt;
  &lt;input type="text" name="two_d" id="two_d" value="GGGGGGGG" /&gt;
  &lt;input type="text" name="two_e" id="two_f" value="HHHHHHHH" /&gt;
  &lt;input type="text" name="two_f" id="two_e" value="IIIIIIII" /&gt;
  &lt;select name="two_g"&gt;
    &lt;option value="444444"&gt;444444&lt;/option&gt;
    &lt;option value="555555"&gt;555555&lt;/option&gt;
    &lt;option value="666666"&gt;666666&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;h2&gt;Result&lt;/h2&gt;
&lt;div id="result"&gt;
  &lt;h2&gt;Click on a field..&lt;/h2&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In addition to above @JoeD's answer.</p>

<p>If you want to target fields in a particular form (assuming there are more than one forms) than just fields, you can use the following code:</p>

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


blocks|key|2014781|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2014782|<script>
var+form_original_data+=+$("form").serialize();+
var+form_submit=false;
$('[type="submit"]').click(function()+{
++++form_submit=true;
});
window.onbeforeunload+=+function()+{
++++//console.log($("form").submit());
++++if+($("form").serialize()+!=+form_original_data+&&+form_submit==false)+{
++++++++return+"Do+you+really+want+to+leave+without+saving?";
++++}
};
</script>|code-block|syntax|javascript|2014783|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>&lt;script&gt;
var form_original_data = $("form").serialize(); 
var form_submit=false;
$('[type="submit"]').click(function() {
    form_submit=true;
});
window.onbeforeunload = function() {
    //console.log($("form").submit());
    if ($("form").serialize() != form_original_data &amp;&amp; form_submit==false) {
        return "Do you really want to leave without saving?";
    }
};
&lt;/script&gt;
</code></pre>


blocks|key|2014336|text|首先，我将在表单中添加一个隐藏输入来跟踪表单的状态。然后，当表单上的某些内容发生更改时，我将使用此jQuery片段来设置隐藏输入的值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2014337|++++$("form")
++++.find("input")
++++.change(function(){
++++++++if+($("#hdnFormChanged").val()+==+"no")
++++++++{
++++++++++++$("#hdnFormChanged").val("yes");
++++++++}
++++});|code-block|syntax|javascript|2014338|单击按钮时，可以检查隐藏输入的状态：|2014339|$("#Button").click(function(){
++++if($("#hdnFormChanged").val()+==+"yes")
++++{
++++++++//+handler+code+here...
++++}
});|2014340|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>First, I'd add a hidden input to your form to track the state of the form.  Then, I'd use this jQuery snippet to set the value of the hidden input when something on the form changes:</p>

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

<p>When your button is clicked, you can check the state of your hidden input:</p>

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


<p>In jQuery, is there a simple way to test if <em>any</em> of a form's elements have changed?</p>
<p>Say I have a form and I have a button with the following <code>click()</code> event:</p>
<pre><code>$('#mybutton').click(function() {
  // Here is where is need to test
  if(/* FORM has changed */) {
     // Do something
  }
});
</code></pre>
<p>How would I test if the form has changed since it was loaded?</p>


How do you handle a form change in jQuery?

jQuery

JSON

在jQuery中，有没有一种简单的方法来测试表单的任何元素是否发生了变化？假设我有一个表单和一个带有以下click()事件的按钮：$('#mybutton').click(function() {  // Here is where is need to test  if(/* FORM has changed */) {     // Do something  }});如何测试表单在加载后是否

问如何在jQuery中处理表单更改？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中处理表单更改？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中处理表单更改？
EN