HTMLDialogElement.returnValue

The returnValue property of the HTMLDialogElement interface gets or sets the return value for the <dialog>, usually to indicate which button the user pressed to close it.

Syntax

dialogInstance.returnValue = 'myReturnValue';
var myReturnValue = dialogInstance.returnValue;

Value

A DOMString representing the returnValue of the dialog.

Examples

The following example displays a button to open a <dialog> containing a form via the showModal() method. From there, either button will close the dialog.

  <!-- Simple pop-up dialog box containing a form -->
  <dialog id="favDialog">
    <form method="dialog">
      <p><label>Favorite animal:
        <select name="favAnimal" required>
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label></p>
      <menu>
        <button>Cancel</button>
        <button>Confirm</button>
      </menu>
    </form>
  </dialog>

  <menu>
    <button id="updateDetails">Update details</button>
  </menu>

  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if (dialog.open) {
          console.log('Dialog open');
        } else {
          console.log('Dialog closed');
        }
      }

      function handleUserInput(returnValue) {
        if (returnValue === 'Cancel' || returnValue == null) {
          // User canceled the dialog, do nothing
        } else if (returnValue === 'Confirm') {
          // User chose a favorite animal, do something with it
        }
      }

      // “Update details” button opens the <dialog> modally
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
        handleUserInput(dialog.returnValue);
      });
    })();
  </script>

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• The HTML element implementing this interface: <dialog>.