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.
A DOMString
representing the returnValue
of the dialog.
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.
<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) {
} else if (returnValue === 'Confirm') {
}
}
updateButton.addEventListener('click', function() {
dialog.showModal();
openCheck(dialog);
handleUserInput(dialog.returnValue);
});
})();
</script>