Technology that earns its place.

Web Development

Read a dialog’s returnValue without treating it as saved form data

Editors at Selsela Tech Notes ·
A laptop screen showing a clean generic modal dialog with two distinct action buttons, no brand.
AI-generated photographic illustration; not documentary photography.

A confirmation dialog closes with the value “accept.” That tells your code which choice it recorded. It does not establish that a database write succeeded, that an API request completed, or even that a request was made.

The native dialog’s returnValue is a string. MDN’s reference explains that it can be assigned directly or supplied to close(). Treat it as a small message between the dialog and the surrounding page.

Reset the choice for each opening

Here is an illustrative pattern for an existing dialog element and its buttons. The buttons should have type="button", suitable accessible labels and the corresponding IDs. This fragment handles a choice only; it deliberately contains no persistence request.

const dialog = document.querySelector('#choice');
const openButton = document.querySelector('#open-choice');
const acceptButton = document.querySelector('#accept-choice');
const cancelButton = document.querySelector('#cancel-choice');

openButton.addEventListener('click', () => {
  dialog.returnValue = '';
  dialog.showModal();
});
acceptButton.addEventListener('click', () => dialog.close('accept'));
cancelButton.addEventListener('click', () => dialog.close('cancel'));
dialog.addEventListener('close', () => {
  if (dialog.returnValue === 'accept') {
    console.log('The user chose accept; nothing has been saved yet.');
  }
});

Resetting before showModal() matters because a dismissal such as Escape does not automatically provide your application’s new choice string. Without a deliberate reset, a previous value can become a misleading clue when the same element is reused.

Test the second opening, not only the first

  1. Open the dialog and choose Accept.
  2. Open it again and press Escape.
  3. Confirm that the second close is not handled as another acceptance.
  4. Repeat with the visible Cancel control.

Inspect both the UI and the event handling. If your application performs a save after acceptance, keep that operation’s pending, success and failure states separate. Display “saved” only when the actual operation has succeeded according to the application’s contract. A closed dialog is an interaction state, not a storage receipt.

Also decide what happens to editable fields when the dialog reopens. Clearing a choice string does not clear those fields. Their retention policy should match the task, and focus should return to a sensible control after closing. These are separate decisions that happen to meet at the same small window.

Topics: /