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>
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?
This is really opinion based because there are a lot of ways to approach this. For me, I’d handle it at the database layer so that I’m guaranteed that I’m comparing the user’s input to what’s actually stored in the database (what if one person loads the form and another person changes a value in the database before the first person submits their form?)
Good point. Although in my case very low possibility of double submitting. There is some other actions needs to be done IF form eventually will be submitted. (Sending another hidden form after, that why it should met some conditions first)
