How do I prompt the user to save data before exiting the web page?

Source: Internet
Author: User
When a user adds or modifies data on a page, the user may have modified some data on the page, at this time, the user accidentally clicked the button or link to leave the modification page, and all the work the user has just done will be voided. In order to achieve personalization, the user should have been modified, whether or not to save the prompt to exit. To achieve the above results, you need to do the following:

1. Determine whether the value in the form has been modified.

2. Before a form is redirected or closed, it should be judged based on the entries in 1. When the user does not actually submit an event, it is prompted that the user has modified data but not saved, you can click "no" to cancel the operation.

In view of the above analysis, use the following method:

1. Add a hidden field to the page to save whether the form has been modified.

<Input type = "text" id = "txtflag" value = "0"/>
Function valuechanged ()
{
Document. getelementbyid ("txtflag"). value = 1; // indicates that the form value has been modified.
}
Make all input and select (corresponding to ASP. net is the textbox, dropdownlist, radiobutton and other server-side controls) type Elements of onchange (value change), onkeypress (with input), onpaste (paste value) run the valuechanged () function for events that change the input and select values.

2. In the onbeforeunload event of the body, the user is prompted to save the event based on the txtflag value. The specific function is as follows:

Function closeit ()
{
If (document. getelementbyid ("txtflag"). value! = "0") // If the txtflag value is not 0, a prompt is displayed.
Event. returnvalue = "the page value has been modified. Are you sure you want to save it? ";
}

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.