blocks|key|1537635|text|在纯javascript中，这不是一项简单的任务，但jQuery让它变得非常容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537636|$("#myform+:input").change(function()+{
+++$("#myform").data("changed",true);
});|code-block|syntax|javascript|1537637|然后在保存之前，您可以检查它是否发生了更改：|1537638|if+($("#myform").data("changed"))+{
+++//+submit+the+form
}|1537639|在上面的例子中，表单的id等于"myform“。|1537640|如果你需要很多形式的插件，你可以很容易地把它变成一个插件：|1537641|$.fn.extend({
+trackChanges:+function()+{
+++$(":input",this).change(function()+{
++++++$(this.form).data("changed",+true);
+++});
+}
+,
+isChanged:+function()+{+
+++return+this.data("changed");+
+}
});|1537642|然后你可以简单地说：|1537643|$("#myform").trackChanges();|1537644|并检查表单是否已更改：|1537645|if+($("#myform").isChanged())+{
+++//+...
}|1537646|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>In pure javascript, this would not be an easy task, but jQuery makes it very easy to do:</p>

<pre><code>$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});
</code></pre>

<p>Then before saving, you can check if it was changed:</p>

<pre><code>if ($("#myform").data("changed")) {
   // submit the form
}
</code></pre>

<p>In the example above, the form has an id equal to "myform".</p>

<p>If you need this in many forms, you can easily turn it into a plugin:</p>

<pre><code>$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});
</code></pre>

<p>Then you can simply say:</p>

<pre><code>$("#myform").trackChanges();
</code></pre>

<p>and check if a form has changed:</p>

<pre><code>if ($("#myform").isChanged()) {
   // ...
}
</code></pre>


blocks|key|1537713|text|以防JQuery是不可能的。在谷歌上快速搜索一下，就发现了MD5和SHA1散列算法的Javascript实现。如果需要，您可以连接所有表单输入并对其进行散列，然后将该值存储在内存中。当用户完成时。将所有值连接起来，然后再次进行散列。比较两个哈希。如果它们相同，则用户未更改任何表单域。如果它们不同，则说明某些内容已被编辑，您需要调用持久性代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537714|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>In case JQuery is out of the question.  A quick search on Google found Javascript implementations of MD5 and SHA1 hash algorithms.  If you wanted, you could concatenate all form inputs and hash them, then store that value in memory.  When the user is done.  Concatenate all the values and hash again.  Compare the 2 hashes.  If they are the same, the user did not change any form fields.  If they are different, something has been edited, and you need to call your persistence code.</p>


blocks|key|1322470|text|下面是我是如何做到的(没有使用jQuery)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322471|在我的例子中，我希望一个特定的表单元素不被计算在内，因为它是触发检查的元素，因此总是会发生变化。异常元素被命名为'reporting_period‘，并且被硬编码在函数'hasFormChanged()’中。|1322472|为了进行测试，让一个元素调用函数"changeReportingPeriod()"，您可能想要给它命名其他名称。|1322473|重要提示:当值被设置为它们的原始值时(通常是在页面加载时，但在我的例子中不是)，您必须调用setInitialValues()。|1322474|注意:我并不认为这是一个优雅的解决方案，事实上，我不相信优雅的JavaScript解决方案。我个人在JavaScript中强调的是可读性，而不是结构上的优雅(好像这在JavaScript中是可能的)。在编写JavaScript时，我一点也不关心文件大小，因为这就是gzip的用途，而试图编写更紧凑的JavaScript代码总是会导致无法忍受的维护问题。我不会道歉，也不会表示悔恨，也不会对此进行辩论。我是JavaScript。对不起，我不得不说清楚这一点，以便说服自己，我应该费心张贴。快乐！:)|1322475|++++var+initial_values+=+new+Array();

++++//+Gets+all+form+elements+from+the+entire+document.
++++function+getAllFormElements()+{
++++++++//+Return+variable.
++++++++var+all_form_elements+=+Array();

++++++++//+The+form.
++++++++var+form_activity_report+=+document.getElementById('form_activity_report');

++++++++//+Different+types+of+form+elements.
++++++++var+inputs+=+form_activity_report.getElementsByTagName('input');
++++++++var+textareas+=+form_activity_report.getElementsByTagName('textarea');
++++++++var+selects+=+form_activity_report.getElementsByTagName('select');

++++++++//+We+do+it+this+way+because+we+want+to+return+an+Array,+not+a+NodeList.
++++++++var+i;
++++++++for+(i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++++++all_form_elements.push(inputs[i]);
++++++++}
++++++++for+(i+=+0;+i+<+textareas.length;+i%2B%2B)+{
++++++++++++all_form_elements.push(textareas[i]);
++++++++}
++++++++for+(i+=+0;+i+<+selects.length;+i%2B%2B)+{
++++++++++++all_form_elements.push(selects[i]);
++++++++}

++++++++return+all_form_elements;
++++}

++++//+Sets+the+initial+values+of+every+form+element.
++++function+setInitialFormValues()+{
++++++++var+inputs+=+getAllFormElements();
++++++++for+(var+i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++++++initial_values.push(inputs[i].value);
++++++++}
++++}

++++function+hasFormChanged()+{
++++++++var+has_changed+=+false;
++++++++var+elements+=+getAllFormElements();

++++++++for+(var+i+=+0;+i+<+elements.length;+i%2B%2B)+{
++++++++++++if+(elements[i].id+!=+'reporting_period'+&&+elements[i].value+!=+initial_values[i])+{
++++++++++++++++has_changed+=+true;
++++++++++++++++break;
++++++++++++}
++++++++}

++++++++return+has_changed;
++++}

++++function+changeReportingPeriod()+{
++++++++alert(hasFormChanged());
++++}|code-block|syntax|javascript|1322476|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Here's how I did it (without using jQuery).</p>

<p>In my case, I wanted one particular form element not to be counted, because it was the element that triggered the check and so will always have changed. The exceptional element is named 'reporting_period' and is hard-coded in the function 'hasFormChanged()'.</p>

<p>To test, make an element call the function "changeReportingPeriod()", which you'll probably want to name something else.</p>

<p>IMPORTANT: You must call setInitialValues() when the values have been set to their original values (typically at page load, but not in my case).</p>

<p>NOTE: I do not claim that this is an elegant solution, in fact I don't believe in elegant JavaScript solutions. My personal emphasis in JavaScript is on readability, not structural elegance (as if that were possible in JavaScript). I do not concern myself with file size at all when writing JavaScript because that's what gzip is for, and trying to write more compact JavaScript code invariably leads to intolerable problems with maintenance. I offer no apologies, express no remorse and refuse to debate it. It's JavaScript. Sorry, I had to make this clear in order to convince myself that I should bother posting. Be happy! :)</p>

<pre><code>
    var initial_values = new Array();

    // Gets all form elements from the entire document.
    function getAllFormElements() {
        // Return variable.
        var all_form_elements = Array();

        // The form.
        var form_activity_report = document.getElementById('form_activity_report');

        // Different types of form elements.
        var inputs = form_activity_report.getElementsByTagName('input');
        var textareas = form_activity_report.getElementsByTagName('textarea');
        var selects = form_activity_report.getElementsByTagName('select');

        // We do it this way because we want to return an Array, not a NodeList.
        var i;
        for (i = 0; i &lt; inputs.length; i++) {
            all_form_elements.push(inputs[i]);
        }
        for (i = 0; i &lt; textareas.length; i++) {
            all_form_elements.push(textareas[i]);
        }
        for (i = 0; i &lt; selects.length; i++) {
            all_form_elements.push(selects[i]);
        }

        return all_form_elements;
    }

    // Sets the initial values of every form element.
    function setInitialFormValues() {
        var inputs = getAllFormElements();
        for (var i = 0; i &lt; inputs.length; i++) {
            initial_values.push(inputs[i].value);
        }
    }

    function hasFormChanged() {
        var has_changed = false;
        var elements = getAllFormElements();

        for (var i = 0; i &lt; elements.length; i++) {
            if (elements[i].id != 'reporting_period' && elements[i].value != initial_values[i]) {
                has_changed = true;
                break;
            }
        }

        return has_changed;
    }

    function changeReportingPeriod() {
        alert(hasFormChanged());
    }


</code></pre>


blocks|key|1322513|text|我不确定我是否正确地回答了您的问题，但是addEventListener呢？如果你不太关心IE8支持，这应该没问题。以下代码适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322514|var+form+=+document.getElementById("myForm");

form.addEventListener("input",+function+()+{
++++console.log("Form+has+changed!");
});|code-block|syntax|javascript|1322515|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>I am not sure if I get your question right, but what about addEventListener? If you don't care too much about IE8 support this should be fine. The following code is working for me:</p>

<pre><code>var form = document.getElementById("myForm");

form.addEventListener("input", function () {
    console.log("Form has changed!");
});
</code></pre>


blocks|key|1537845|text|实现这一点的另一种方法是序列化表单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537846|​|1537847|$(function()+{
++++var+$form+=+$('form');
++++var+initialState+=+$form.serialize();
++++
++++$form.submit(function+(e)+{
++++++if+(initialState+===+$form.serialize())+{
++++++++console.log('Form+is+unchanged!');
++++++}+else+{
++++++++console.log('Form+has+changed!');
++++++}
++++++e.preventDefault();
++++});
});|code-block|syntax|javascript|1537848|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Field+1:+<input+type="text"+name="field_1"+value="My+value+1">+<br>
Field+2:+<input+type="text"+name="field_2"+value="My+value+2">+<br>
Check:+<input+type="checkbox"+name="field_3"+value="1"><br>
<input+type="submit">
</form>|1537849|1537850|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Another way to achieve this is serialize the form:</p>

<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>$(function() {
    var $form = $('form');
    var initialState = $form.serialize();
    
    $form.submit(function (e) {
      if (initialState === $form.serialize()) {
        console.log('Form is unchanged!');
      } else {
        console.log('Form has changed!');
      }
      e.preventDefault();
    });
});</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;form&gt;
Field 1: &lt;input type="text" name="field_1" value="My value 1"&gt; &lt;br&gt;
Field 2: &lt;input type="text" name="field_2" value="My value 2"&gt; &lt;br&gt;
Check: &lt;input type="checkbox" name="field_3" value="1"&gt;&lt;br&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1537886|text|下面是一个原生JavaScript中的polyfill方法演示，它使用FormData()应用编程接口来检测创建、更新和删除的表单条目。您可以使用HTMLFormElement#isChanged检查是否有任何更改，并使用HTMLFormElement#changes从重置表单获取包含差异的对象(假设它们没有被输入名称屏蔽)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1537887|​|1537888|Object.defineProperties(HTMLFormElement.prototype,+{
++isChanged:+{
++++configurable:+true,
++++get:+function+isChanged+()+{
++++++'use+strict'

++++++var+thisData+=+new+FormData(this)
++++++var+that+=+this.cloneNode(true)

++++++//+avoid+masking:+https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
++++++HTMLFormElement.prototype.reset.call(that)

++++++var+thatData+=+new+FormData(that)

++++++const+theseKeys+=+Array.from(thisData.keys())
++++++const+thoseKeys+=+Array.from(thatData.keys())

++++++if+(theseKeys.length+!==+thoseKeys.length)+{
++++++++return+true
++++++}

++++++const+allKeys+=+new+Set(theseKeys.concat(thoseKeys))

++++++function+unequal+(value,+index)+{
++++++++return+value+!==+this[index]
++++++}

++++++for+(const+key+of+theseKeys)+{
++++++++const+theseValues+=+thisData.getAll(key)
++++++++const+thoseValues+=+thatData.getAll(key)

++++++++if+(theseValues.length+!==+thoseValues.length)+{
++++++++++return+true
++++++++}

++++++++if+(theseValues.some(unequal,+thoseValues))+{
++++++++++return+true
++++++++}
++++++}

++++++return+false
++++}
++},
++changes:+{
++++configurable:+true,
++++get:+function+changes+()+{
++++++'use+strict'

++++++var+thisData+=+new+FormData(this)
++++++var+that+=+this.cloneNode(true)

++++++//+avoid+masking:+https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
++++++HTMLFormElement.prototype.reset.call(that)

++++++var+thatData+=+new+FormData(that)

++++++const+theseKeys+=+Array.from(thisData.keys())
++++++const+thoseKeys+=+Array.from(thatData.keys())

++++++const+created+=+new+FormData()
++++++const+deleted+=+new+FormData()
++++++const+updated+=+new+FormData()

++++++const+allKeys+=+new+Set(theseKeys.concat(thoseKeys))

++++++function+unequal+(value,+index)+{
++++++++return+value+!==+this[index]
++++++}

++++++for+(const+key+of+allKeys)+{
++++++++const+theseValues+=+thisData.getAll(key)
++++++++const+thoseValues+=+thatData.getAll(key)

++++++++const+createdValues+=+theseValues.slice(thoseValues.length)
++++++++const+deletedValues+=+thoseValues.slice(theseValues.length)

++++++++const+minLength+=+Math.min(theseValues.length,+thoseValues.length)

++++++++const+updatedValues+=+theseValues.slice(0,+minLength).filter(unequal,+thoseValues)

++++++++function+append+(value)+{
++++++++++this.append(key,+value)
++++++++}

++++++++createdValues.forEach(append,+created)
++++++++deletedValues.forEach(append,+deleted)
++++++++updatedValues.forEach(append,+updated)
++++++}

++++++return+{
++++++++created:+Array.from(created),
++++++++deleted:+Array.from(deleted),
++++++++updated:+Array.from(updated)
++++++}
++++}
++}
})

document.querySelector('[value="Check"]').addEventListener('click',+function+()+{
++if+(this.form.isChanged)+{
++++console.log(this.form.changes)
++}+else+{
++++console.log('unchanged')
++}
})|code-block|syntax|javascript|1537889|<form>
++<div>
++++<label+for="name">Text+Input:</label>
++++<input+type="text"+name="name"+id="name"+value=""+tabindex="1"+/>
++</div>

++<div>
++++<h4>Radio+Button+Choice</h4>

++++<label+for="radio-choice-1">Choice+1</label>
++++<input+type="radio"+name="radio-choice-1"+id="radio-choice-1"+tabindex="2"+value="choice-1"+/>

++++<label+for="radio-choice-2">Choice+2</label>
++++<input+type="radio"+name="radio-choice-2"+id="radio-choice-2"+tabindex="3"+value="choice-2"+/>
++</div>

++<div>
++++<label+for="select-choice">Select+Dropdown+Choice:</label>
++++<select+name="select-choice"+id="select-choice">
++++++<option+value="Choice+1">Choice+1</option>
++++++<option+value="Choice+2">Choice+2</option>
++++++<option+value="Choice+3">Choice+3</option>
++++</select>
++</div>

++<div>
++++<label+for="textarea">Textarea:</label>
++++<textarea+cols="40"+rows="8"+name="textarea"+id="textarea"></textarea>
++</div>

++<div>
++++<label+for="checkbox">Checkbox:</label>
++++<input+type="checkbox"+name="checkbox"+id="checkbox"+/>
++</div>

++<div>
++++<input+type="button"+value="Check"+/>
++</div>
</form>|1537890|1537891|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/FormData^0|Z|A|21|P|33|N|Z|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Here's a polyfill method demo in native JavaScript that uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" rel="nofollow noreferrer"><code>FormData()</code></a> API to detect created, updated, and deleted form entries. You can check if anything was changed using <code>HTMLFormElement#isChanged</code> and get an object containing the differences from a reset form using <code>HTMLFormElement#changes</code> (assuming they're not masked by an input name):</p>

<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>Object.defineProperties(HTMLFormElement.prototype, {
  isChanged: {
    configurable: true,
    get: function isChanged () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      if (theseKeys.length !== thoseKeys.length) {
        return true
      }

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of theseKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        if (theseValues.length !== thoseValues.length) {
          return true
        }

        if (theseValues.some(unequal, thoseValues)) {
          return true
        }
      }

      return false
    }
  },
  changes: {
    configurable: true,
    get: function changes () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      const created = new FormData()
      const deleted = new FormData()
      const updated = new FormData()

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of allKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        const createdValues = theseValues.slice(thoseValues.length)
        const deletedValues = thoseValues.slice(theseValues.length)

        const minLength = Math.min(theseValues.length, thoseValues.length)

        const updatedValues = theseValues.slice(0, minLength).filter(unequal, thoseValues)

        function append (value) {
          this.append(key, value)
        }

        createdValues.forEach(append, created)
        deletedValues.forEach(append, deleted)
        updatedValues.forEach(append, updated)
      }

      return {
        created: Array.from(created),
        deleted: Array.from(deleted),
        updated: Array.from(updated)
      }
    }
  }
})

document.querySelector('[value="Check"]').addEventListener('click', function () {
  if (this.form.isChanged) {
    console.log(this.form.changes)
  } else {
    console.log('unchanged')
  }
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;div&gt;
    &lt;label for="name"&gt;Text Input:&lt;/label&gt;
    &lt;input type="text" name="name" id="name" value="" tabindex="1" /&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;h4&gt;Radio Button Choice&lt;/h4&gt;

    &lt;label for="radio-choice-1"&gt;Choice 1&lt;/label&gt;
    &lt;input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" /&gt;

    &lt;label for="radio-choice-2"&gt;Choice 2&lt;/label&gt;
    &lt;input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" /&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;label for="select-choice"&gt;Select Dropdown Choice:&lt;/label&gt;
    &lt;select name="select-choice" id="select-choice"&gt;
      &lt;option value="Choice 1"&gt;Choice 1&lt;/option&gt;
      &lt;option value="Choice 2"&gt;Choice 2&lt;/option&gt;
      &lt;option value="Choice 3"&gt;Choice 3&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;label for="textarea"&gt;Textarea:&lt;/label&gt;
    &lt;textarea cols="40" rows="8" name="textarea" id="textarea"&gt;&lt;/textarea&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;label for="checkbox"&gt;Checkbox:&lt;/label&gt;
    &lt;input type="checkbox" name="checkbox" id="checkbox" /&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;input type="button" value="Check" /&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1537941|text|我真的很喜欢上面来自Teekin的贡献，并实现了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537942|但是，我使用如下代码扩展了它，也允许使用复选框：|1537943|//+Gets+all+form+elements+from+the+entire+document.
function+getAllFormElements()+{
++++//+Return+variable.
++++var+all_form_elements+=+Array();

++++//+The+form.
++++var+Form+=+document.getElementById('frmCompDetls');

++++//+Different+types+of+form+elements.
++++var+inputs+=+Form.getElementsByTagName('input');
++++var+textareas+=+Form.getElementsByTagName('textarea');
++++var+selects+=+Form.getElementsByTagName('select');
++++var+checkboxes+=+Form.getElementsByTagName('CheckBox');

++++//+We+do+it+this+way+because+we+want+to+return+an+Array,+not+a+NodeList.
++++var+i;
++++for+(i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++all_form_elements.push(inputs[i]);
++++}
++++for+(i+=+0;+i+<+textareas.length;+i%2B%2B)+{
++++++++all_form_elements.push(textareas[i]);
++++}
++++for+(i+=+0;+i+<+selects.length;+i%2B%2B)+{
++++++++all_form_elements.push(selects[i]);
++++}
++++for+(i+=+0;+i+<+checkboxes.length;+i%2B%2B)+{
++++++++all_form_elements.push(checkboxes[i]);
++++}
++++return+all_form_elements;
}

//+Sets+the+initial+values+of+every+form+element.
function+setInitialFormValues()+{
++++var+inputs+=+getAllFormElements();
++++for+(var+i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++if(inputs[i].type+!=+"checkbox"){
++++++++++++initial_values.push(inputs[i].value);
++++++++}
++++++++else
++++++++{
++++++++++++initial_values.push(inputs[i].checked);
++++++++}
++++}
++++
}

function+hasFormChanged()+{
++++var+has_changed+=+false;
++++var+elements+=+getAllFormElements();
++++var+diffstring+=+""
++++for+(var+i+=+0;+i+<+elements.length;+i%2B%2B)+{
++++++++if+(elements[i].type+!=+"checkbox"){
++++++++++++if+(elements[i].value+!=+initial_values[i])+{
++++++++++++++++has_changed+=+true;
++++++++++++++++//diffstring+=+diffstring+%2B+elements[i].value%2B"+Was+"%2Binitial_values[i]%2B"\n";
++++++++++++++++break;
++++++++++++}
+++++++++}
+++++++++else
+++++++++{
++++++++++++if+(elements[i].checked+!=+initial_values[i])+{
++++++++++++++++has_changed+=+true;
++++++++++++++++//diffstring+=+diffstring+%2B+elements[i].value%2B"+Was+"%2Binitial_values[i]%2B"\n";
++++++++++++++++break;
++++++++++++}
+++++++++}
++++}
++++//alert(diffstring);
++++return+has_changed;
}|code-block|syntax|javascript|1537944|diffstring只是一个调试工具|1537945|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I really like the contribution from Teekin above, and have implemented it.</p>
<p>However, I have expanded it to allow for checkboxes too using code like this:</p>
<pre><code>// Gets all form elements from the entire document.
function getAllFormElements() {
    // Return variable.
    var all_form_elements = Array();

    // The form.
    var Form = document.getElementById('frmCompDetls');

    // Different types of form elements.
    var inputs = Form.getElementsByTagName('input');
    var textareas = Form.getElementsByTagName('textarea');
    var selects = Form.getElementsByTagName('select');
    var checkboxes = Form.getElementsByTagName('CheckBox');

    // We do it this way because we want to return an Array, not a NodeList.
    var i;
    for (i = 0; i &lt; inputs.length; i++) {
        all_form_elements.push(inputs[i]);
    }
    for (i = 0; i &lt; textareas.length; i++) {
        all_form_elements.push(textareas[i]);
    }
    for (i = 0; i &lt; selects.length; i++) {
        all_form_elements.push(selects[i]);
    }
    for (i = 0; i &lt; checkboxes.length; i++) {
        all_form_elements.push(checkboxes[i]);
    }
    return all_form_elements;
}

// Sets the initial values of every form element.
function setInitialFormValues() {
    var inputs = getAllFormElements();
    for (var i = 0; i &lt; inputs.length; i++) {
        if(inputs[i].type != &quot;checkbox&quot;){
            initial_values.push(inputs[i].value);
        }
        else
        {
            initial_values.push(inputs[i].checked);
        }
    }
    
}

function hasFormChanged() {
    var has_changed = false;
    var elements = getAllFormElements();
    var diffstring = &quot;&quot;
    for (var i = 0; i &lt; elements.length; i++) {
        if (elements[i].type != &quot;checkbox&quot;){
            if (elements[i].value != initial_values[i]) {
                has_changed = true;
                //diffstring = diffstring + elements[i].value+&quot; Was &quot;+initial_values[i]+&quot;\n&quot;;
                break;
            }
         }
         else
         {
            if (elements[i].checked != initial_values[i]) {
                has_changed = true;
                //diffstring = diffstring + elements[i].value+&quot; Was &quot;+initial_values[i]+&quot;\n&quot;;
                break;
            }
         }
    }
    //alert(diffstring);
    return has_changed;
}

</code></pre>
<p>The diffstring is just a debugging tool</p>


<p>I have a tabbed html form. Upon navigating from one tab to the other, the current tab's data is persisted (on the DB) even if there is no change to the data.</p>

<p>I would like to make the persistence call only if the form is edited. The form can contain any kind of control. Dirtying the form need not be by typing some text but choosing a date in a calendar control would also qualify.</p>

<p>One way to achieve this would be to display the form in read-only mode by default and have an 'Edit' button and if the user clicks the edit button then the call to DB is made (once again, irrespective of whether data is modified. This is a better improvement to what is currently existing).</p>

<p>I would like to know how to write a generic javascript function that would check if any of the controls value has been modified ?</p>


Generic way to detect if html form is edited

数据库

jQuery

我有一个选项卡式html表单。在从一个选项卡导航到另一个选项卡时，即使数据没有更改，当前选项卡的数据也会持久化(在DB上)。我只想在表单被编辑的情况下进行持久性调用。窗体可以包含任何类型的控件。不需要通过键入一些文本来弄脏表单，但在日历控件中选择日期也是合格的。要实现这一点，一种方法是在默认情况下以只读模式显示表单，并...

问检测html表单是否被编辑的通用方法
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测html表单是否被编辑的通用方法EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测html表单是否被编辑的通用方法
EN