Warn users before leaving an unsaved form

Tested environment

AI coding tool: Chat GPT
Model / version: Astra
Mode / effort setting: High

Before you start

An existing website or app with an editable form. Give your AI coding tool access to the project and identify the form to update.

MAKE IT YOURS

Use this prompt

1 Describe your change

What would you like to change? (optional)

Your details are added below the contributor’s original prompt. Leave blank to copy it exactly as submitted.

Where will you use this prompt?

We remember this choice on this device. Choosing a tool does not connect it to this website.

Contributor tested with: Chat GPT. Other tools may produce different results.

2 Copy your prompt

Read the complete prompt below, then copy it.

Add an unsaved-changes warning to an existing form in this project.

First inspect the project and identify the form and routing system. If there are multiple forms, ask me which one to update.

Requirements:
1. Track whether the current form values differ from their initial or last successfully saved values.
2. Warn users before they leave with unsaved changes.
3. For browser refresh or tab closure, use the browser’s standard confirmation where supported. Do not promise custom wording or guaranteed behavior on every browser.
4. Handle in-app navigation using the framework’s supported navigation-blocking mechanism. If it cannot reliably block navigation, explain the limitation.
5. Let users cancel navigation and keep editing.
6. Clear the unsaved state only after a successful save or submission. A failed save must preserve it.
7. If users restore every field to its original value, stop treating the form as changed.
8. Preserve existing validation, submission behavior, styling, and accessibility.
9. Do not store form contents in local storage or send them anywhere new.

Check untouched forms, edited forms, restored values, failed saves, successful saves, and cancelled navigation.

Summarize the changed files, what you verified, browser limitations, and how to undo the change.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

After running it, describe your actual results, tool/model, browser, and test date. Don’t claim tests you haven’t performed.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

Expected result & test notes

After running it, describe your actual results, tool/model, browser, and test date. Don’t claim tests you haven’t performed.

What changes & how to undo it

Adds change tracking and navigation warnings to the selected form. Undo by reverting the changes made for this feature using version control.

Contributed by Gen Alpha Dictionary

See what they are building: Gen Alpha Dictionary ↗

Editorial review checks the submission’s clarity and evidence. It is not a guarantee that the command is suitable for every project. Test it in a disposable copy first.

Report a problem with this contribution →
How contributions are reviewed →