javascript 16 lines · 5 steps

Warn before leaving a form with unsaved edits

Track whether a form has unsaved changes and prompt the user before they navigate away.

Explained by highlit
Beginner event-listeners dom state-tracking beforeunload
1const form = document.querySelector('#profile-form');
2let isDirty = false;
3 
4form.addEventListener('input', () => {
5 isDirty = true;
6});
7 
8form.addEventListener('submit', () => {
9 isDirty = false;
10});
11 
12window.addEventListener('beforeunload', (event) => {
13 if (!isDirty) return;
14 event.preventDefault();
15 event.returnValue = '';
16});
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A single boolean flag is enough to track whether a form has unsaved state.
  2. 2The beforeunload event lets you intercept navigation, but only shows a generic browser prompt.
  3. 3Reset your dirty flag on submit so a successful save doesn't trigger the warning.

Related explainers

javascript 
function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;
 

Building a recursive descent calculator

parsing recursion operator-precedence
Intermediate 8 steps
javascript 
import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks
Advanced 10 steps
javascript 
import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);

Delaying a loading spinner with a React hook

custom-hooks debouncing cleanup
Intermediate 8 steps
javascript 
const SWIPE_THRESHOLD = 80;
const MAX_TRANSLATE = 120;
 
export function attachSwipeToDismiss(element, onDismiss) {

Building a swipe-to-dismiss gesture in JS

touch-events gesture-detection dom-manipulation
Intermediate 10 steps
javascript 
const { pool } = require('./db');
 
function withTransaction() {
  return async (req, res, next) => {

A per-request transaction middleware in Express

middleware database-transactions connection-pooling
Advanced 7 steps
javascript 
function collapseConsecutiveLogs(lines, { keyFn = (l) => l.message } = {}) {
  const groups = [];
 
  for (const line of lines) {

Collapsing consecutive log lines in JavaScript

grouping run-length-encoding data-transformation
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Warn before leaving a form with unsaved edits — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code