Edit in JSFiddle

<!-- 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>
      <p>
        <label>
          <input type="text" name="animallName" placeholder="animal name" />
        </label>
      </p>
      <menu>
        <button name="cancel">Cancel</button>
        <button name='confirm'>Confirm</button>
      </menu>
    </form>
  </dialog>

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

      var updateButton = document.getElementById('updateDetails');
      var dialog = document.getElementById('favDialog');
      // console.log("OUTPUT: dialog.returnValue", dialog.returnValue)
      // dialog.returnValue = 'favAnimal';

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

      function handleUserInput(returnValue) {
        console.log("OUTPUT: handleUserInput -> returnValue", 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
          dialog.returnValue = Array.from(document.querySelector('form')).map(item=>item.name?`${item.name}=${item.value}`:null).filter(item=>!!item).join('&')
        }
        console.log("OUTPUT: dialog.returnValue", dialog.returnValue)
      }

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