Verify whether the user has modified the data on the page. _ javascript skills

Source: Internet
Author: User
When implementing the program modification module, check whether the user has modified the data on the page to remind the user to save the modified data in time. Cause:
When implementing the program modification module, check whether the user has modified the data on the page to remind the user to save the modified data in time.

Implementation requirements:
To determine whether the user has modified the input content, you must be able to determine the checkbox, text, radio, and so on in the input. You do not know how many inputs will be, or the input ID and name, you cannot submit the changes on the client. Both IE and firefox environments are required. You must also support the use of master and content pages.

Solution;
Solution: record all input values or States during page loading. If you are required to adjust the control status immediately during modification, in The onclick and onkeypress events on data zone p, call the function to check whether the data has changed, and set the status of the corresponding control (using ha_setch ()). If the check process is submitted or manually controlled by the user, it is called in the corresponding operation event to check whether the data changes (for example, ha_checkin () is used in the onclick () of the button () control submission ).

The following is the implementation code
Var ha_last = new Array; // defines a global empty object and stores all the 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) ;}// you must set the type value and object attribute on the basic page.
If (ha_input [I]. type = "radio") {ha_last.push (ha_input [I]. checked);} // ensure that the check range is accurate.
}
}
Window. onload = ha_get; // bind the function to read the initial value.
Function ha_checkin () // check whether the new input value is equal to the initial value. Returns the judgment result. True indicates that no modification has been made, and false indicates that modification has been made.
{Var ha_now = new Array;
Var ha_input = document. getElementsByTagName ("input ");
For (var I = 0; I {
If (ha_input [I]. type = "password") {ha_no1_push (ha_input [I]. value) ;}// set the type value and object attribute on the basic page.
If (ha_input [I]. type = "radio") {ha_now.push (ha_input [I]. checked);} // it must be consistent with the label checked in ha_get ().
}
If (ha_no1_tostring () = ha_last.toString () // not modified
{Return true ;}
Else // modified
{Return false ;}
}
Function ha_setch () {// sets the status of the corresponding control
If (ha_checkin () // no changes
// Changes the display and function status of the control.
Else // changed
// Changes the display and function status of the control.
}

Note: The preceding solutions are only available in IE6 and firefox3.0. 2. Not tested in other browsers.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.