Ignore formmethod when value is "dialog"

[SamDudley]

Buttons support dialog as a valid value for the formmethod attribute.

MDN documentation

Given the following example:

<dialog>
    <form hx-post="/test">
        <button formmethod="dialog" name="foo" value="bar">Submit</button>
    </form>
</dialog>

htmx will issue a request with a method of DIALOG

There are a couple of issues with this:

• DIALOG is not a valid request method
• backend frameworks don't understand the request and the sent form data is ignored

Here is the line of code which causes this:

htmx/src/htmx.js

Lines 2960 to 2961 in 04250d5

	var buttonVerb = getRawAttribute(submitter, "formmethod")
	if (buttonVerb != null) {

As dialog is a valid formmethod attribute, but not a valid request method, I think htmx should ignore the formmethod in this case when creating the AJAX request.

I'm going to create a PR with these changes and add some tests, but I'm more than happy to discuss further.

[SamDudley]

Here is my PR #1867.

[geoffrey-eisenbarth]

Isn't the whole point of <button action="submit" formmethod="dialog"> to not submit the form and close an open <dialog> modal?

The "Cancel" button includes the formmethod="dialog" attribute, which overrides the form's default GET method. When a form's method is dialog, the state of the form is saved but not submitted, and the dialog gets closed.

(source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)

With this in mind, IMO htmx should not continue the request once it detects that buttonVerb is "dialog".

var buttonVerb = getRawAttribute(submitter, "formmethod")
if (buttonVerb != null) {
    // ignore buttons with formmethod="dialog"
    if (buttonVerb.toLowerCase() == "dialog") {
       // Do something here to halt the event
    } else {
        verb = buttonVerb;
    }
}

[michal-laskowski]

Try this solution
Note that you have to specify target on form.

 <dialog
                hx-on--load="event.target.showModal()"
                hx-on-close="event.target.remove()"
                hx-on--after-settle="event.target.close()"
            >
            <form hx-post="/test"
            hx-target="closest container"
            hx-trigger="submit">
            
                            <button
                                type="button"
                                formnovalidate
                                hx-on:click="event.target.closest('dialog').close()"
                            >
                                Cancel
                            </button>
                            <button type="submit">
                                Continue
                            </button>
            </form>
</dialog>