devxlogo

Confirmation on Unsaved Form Data

Confirmation on Unsaved Form Data

Question:
I have several forms in different pages which are linked using a tab approach. I would like to pop-up a confirmation window if someone is moving from one tab to the next after (potentially) changing data. I thought of an easy way to do this by checking to see if the client has hit a key. That way, the “ONCLICK” event could call the function or have logic that says, “if any data has been entered into the form, bring up the confirmation, else move on.” It seems that the onkeydown is the only way I can trap if a key is being hit, but I don’t know how to link this with the ONCLICK event behind the tab.

Answer:
There are any number of ways to do this. The one I would use is to:

(1) Create a flag, say, called formChanged, and set it to false when the page loads.

(2) Add onChange event handlers to each field that I’d want to track. Each onChange handler would set formChanged to true.

(3) Add an onUnload event handler that checks formChanged to the page. If it’s true, then put up your warning message.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist