Use cases for

Jayesh Bhoot — Wed, 15 Jan 2025 10:52:16 +0000

I've started using a relatively less known value of the <form> element's method attribute, called dialog, for the following scenarios:

when a form is submitted via AJAX.
when a form is a multi-step wizard, where each step is a form in itself, and I have to accummulate values from each step.

But what about MDN talking about using it in a `<dialog>` element?

MDN reference defines method="dialog" as:

When the form is inside a <dialog>, closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.

But the HTML spec, having been written in officialese and being the more authoritative source than MDN, provides a nice escape hatch.

The spec defines method="dialog" as follows (emphasis mine):

Indicates the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit.

My interpretation is that method="dialog" has two jobs:

If a <form> using method="dialog" is located inside a <dialog> element, then its submission causes the dialog to close.
method="dialog" also does not really submit the form, i.e., it fires the submit event, but leaves the actual submission to further programming, like AJAX. As a nice side-effect, I don't have to fire an explicit ev.preventDefault().

Am I wrong? May be. Please let me know in the comments.

DEV Community: Jayesh Bhoot

Use cases for

But what about MDN talking about using it in a <dialog> element?

But what about MDN talking about using it in a `<dialog>` element?