HTMLDialogElement: returnValue property
=======================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
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.

Value
-----

A string representing the `returnValue` of the dialog.

Examples
--------

 The following example displays a button to open a `<dialog>` containing a form via the `showModal()` method.
 The script assigns the `returnValue` an initial value of `initialValue`.
 The confirm button (`confirmBtn`) submits the form with validation and the "X" button submits the form without validation. Submitting a form with a `method="dialog"` closes the dialog and sets the return value to the `value`, if any, of the `button` or `input` elements of `type=submit`.
 The reset button has an event handler that closes the dialog; it has no impact on the `returnValue`. Neither does closing the dialog with the `Esc` key.


```html
<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <input
 type="submit"
 aria-label="close"
 value="X"
 name="Xbutton"
 formnovalidate />
    <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 type="reset" value="resetBtn">Reset</button>
      <button type="submit" value="confirmBtn">Confirm</button>
    </menu>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="text"></p>

<script>
 (() => {
 const openDialog = document.getElementById("openDialog");
 const dialog = document.getElementById("favDialog");
 const text = document.getElementById("text");
 const reset = document.querySelector("[type='reset']");
 dialog.returnValue = "initialValue";

 function openCheck(dialog) {
 if (dialog.open) {
 text.innerText = "Dialog open";
 } else {
 text.innerText = "Dialog closed";
 }
 }

 function handleUserInput(returnValue) {
 if (!returnValue) {
 text.innerText += ". There was no return value";
 } else {
 text.innerText += ". Return value: " + returnValue;
 }
 }

 // "Open Dialog" button opens the <dialog> modally
 openDialog.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 handleUserInput(dialog.returnValue);
 });

 reset.addEventListener("click", () => {
 dialog.close();
 });

 // when the dialog is closed, no matter how it is closed
 dialog.addEventListener("close", () => {
 openCheck(dialog);
 handleUserInput(dialog.returnValue);
 });
 })();
</script>
<style>
 [aria-label="close"] {
 appearance: none;
 border-radius: 50%;
 border: 1px solid;
 float: right;
 }
</style>
```

### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-dialog-returnvalue-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<dialog>`.