将预填充的数据与用户输入进行比较，只有在编辑过后才提交表单

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>

Answer 2

@imvain2 的回答需要大量编码。

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

将预填充的数据与用户输入进行比较，只有在编辑过后才提交表单

Compare prepopulated data with user input, and submit form only if it has been edited

html

javascript

cfml