将预置的数据与用户输入的数据进行比较，只有在编辑过的情况下才能提交表单。

Question

当用户访问页面时，我的表单有预先填充的数据。

<Form id="UDE" action="UserDataEdit.cfm>
  <input type="Text" name="First_Name" value="#Variable.First_Name#">
  <input type="Text" name="Last_Name" value="#Variable.Last_Name#">
  <input type="Text" name="Title" value="#Variable.Title#">
  <input name="DataEdit" type="submit" class="BtnSbmt" value="Submit">
<Form>

有什么方法可以将用户的输入与服务器数据进行比较，并在用户有任何更改时才提交整个表单？

Answer 1

一种方法是将默认数据存储在一个数据属性中，然后在点击按钮时循环引用。

我也清理了一些字段的随机问题。

var _btn = document.querySelector(".BtnSbmt");

_btn.addEventListener("click",function(){
  var allow_submit = true;
  var _fields = document.querySelectorAll("form#UDE input[type=text]");
  _fields.forEach(function(el){
    if(el.getAttribute("data-value") != el.value){allow_submit=false;}
  });
  
  if(allow_submit){
  document.querySelector("form#UDE").submit();
  }
});

<Form id="UDE" action="UserDataEdit.cfm">
  <input data-value="#Variable.First_Name#" type="Text" name="First_Name" value="#Variable.First_Name#">
  <input data-value="#Variable.Last_Name#" type="Text" name="Last_Name" value="#Variable.Last_Name#">
  <input data-value="#Variable.Title#" type="Text" name="Title" value="#Variable.Title#">
  <input name="DataEdit" type="button" class="BtnSbmt" value="Submit">
</Form>