Make <dialog> usable without JS (for form confirmation)

[tino]

What problem are you trying to solve?

I'd like to have the possibility for a confirmation before a form submit.

What solutions exist today?

Using javascript to intersept the submission, call dialow.showModal(), check the result and continue submitting or not.

How would you solve it?

Given this is quite a common use case, I would suggest the following:

<form ...>
<input ...>
<!-- etc -->
<input type="submit" value="Submit..." />
<dialog role="confirmation">
  <p>Are you sure you want to submit/delete/modify X?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </fom>
</dialog>
</form>

Hitting the submit button should open the dialog. Then, hitting cancel should close the dialog, and prevent the original submission. Hitting confirm should close the dialog, and allow the original form submission to go through.

Anything else?

It is quite possible that I don't fully understand how this all evolves, but it feels a bit strange to me that there are things added like dialog that only / partially work without javascript.

[keithamus]

I think #9841 should be able to cover this case, by putting the submit button inside of the dialog, and making the forms button a "fake" submit button that actually opens the dialog:

<form ...>
<input ...>
<!-- etc -->
<button type="button" commandfor="d" command="show-modal">Submit...</button>
<dialog role="confirmation" id="d">
  <p>Are you sure you want to submit/delete/modify X?</p>
  <button type="button" commandfor="d" command="close">Cancel</button>
  <button type="submit" value="confirm">Confirm</button>
</dialog>
</form>

[jimmyfrasche]

presumably it should also show the dialog when the enter key requests form submission

[keithamus]

Yeah that’s a good point. The commandfor example wouldn’t cover that.

[smaug----]

We could extend support for command* attributes, so that the relevant command was triggered also when pressing enter on a textfield or so.