简体   繁体   中英

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

My form has prepopulated data when user access the page.

<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>

What is the approach to compare user's inputs with server data, and submit entire form only if user made any changes?

One method is to store the default data in a data attribute and just reference that in a loop on click of the button.

I also cleaned up some random issues with the fields.

 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>

@imvain2 's answer needs a lot of encoding.

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM