Home > Article > Web Front-end > How to verify whether the user has modified the data on the page_javascript skills
Cause:
When implementing the modification module of the program, it is necessary to check whether the user has modified the data on the page side, so as to remind the user to save the modified data in time.
Implementation requirements:
Determine whether the user has modified the input content. You must be able to determine the checkbox, text, radio, etc. in the input. I don’t know how many inputs there will be, and I don’t know the ID and name of the input. To determine whether to modify or not, submission cannot be generated on the client side. It also needs to satisfy both IE and firefox environments. It is also necessary to support the use of master and content pages.
Solution;
Processing idea: Record the value or status of all inputs when the page is loaded. If it is required to adjust the control status immediately when the user makes modification operations, then onclick and on the data area div In the onkeypress event, call the function that checks whether the data has changed, and set the state of the corresponding control (using ha_setch()). If it is submitted or the user manually controls the checking process, the check data is called in the corresponding operation event (for example, use ha_checkin() in the button's onclick() to control submission).
The following is the implementation code
var ha_last=new Array;//Define a global empty object to store all initial values.
function ha_get()//Read the initial value
{ var ha_input = document.getElementsByTagName("input");
for (var i=0;i
if (ha_input[i].type=="password"){ ha_last.push(ha_input[i].value);}//The basic page needs to set the value of type and object attributes
if (ha_input [i].type=="radio") {ha_last.push(ha_input[i].checked);}//To ensure that the check range is accurate
}
}
window.onload=ha_get ;//Bind the function that reads the initial value
function ha_checkin()//Check whether the new input value is equal to the initial value. Return the judgment result. true means no modification has occurred, false means there has been a modification.
{ var ha_now=new Array;
var ha_input = document.getElementsByTagName("input");
for (var i=0;i
if (ha_input[i].type=="password"){ ha_now.push(ha_input[i].value);}//The basic page needs to set the value of type and object attributes.
if (ha_input[i].type=="radio") {ha_now.push(ha_input[i].checked);}//Also ensure that it is consistent with the tag checked in ha_get()
}
if (ha_now.toString()==ha_last.toString())//No modification
{return true;}
else//Modification
{return false;}
}
function ha_setch(){//Set the corresponding control status
if (ha_checkin())//No change
//Change the display and functional status of the control
else//There is a change
//Change the display and functional status of the control
}
Note: The above solution has only been tested and passed in IE6 and firefox3.0.2. Not tested in other browsers.