javascript - 检测形式的变化

Question

我有一个<form>并且需要在提交时检测其中是否有任何更改。

我的想法如下：在加载表单时，我会将其内容保存为表单属性.html()中的字符串。.data()不幸的是，提交表单时不会显示更改（请查看代码片段控制台）。

有几点需要考虑：

• 我需要知道内容是否真的不同，而不仅仅是某些内容是否发生了变化，然后又变回来了

• 表单有很多不同的动态元素，所以虽然通过.val(),.prop('checked')等提取信息是可能的，但我真的宁愿比较两个字符串

$('form').data('data', {oldState: $('form').html()});

$('form').on('submit', e => {
  
  e.preventDefault();
  
  var oldState = $('form').data('data').oldState;
  var currState = $('form').html();
  
  console.log(oldState);
  console.log(currState);
  console.log(oldState == currState);
  
  if(oldState == currState) {
    $('body').append('<p>same!</p>');
  } else {
    $('body').append('<p>changed!</p>');
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" value="Old text">
  <input type="checkbox" checked>
  <button>Save</button>
</form>

标签： javascripthtmljqueryforms

Answer 1

您可以使用serialize()检查表单中的输入值是否相同，然后比较两个字符串。如下所示：

//getting all data in form 
var data = $('form').serialize();
$('form').on('submit', e => {

  e.preventDefault();
  var currState = $('form').serialize();
  console.log(data == currState);

  if (data == currState) {
    $('body').append('<p>same!</p>');
  } else {
    $('body').append('<p>changed!</p>');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" name="t" value="Old text">
  <input type="checkbox" name="t1" checked>
  <button>Save</button>
</form>