hx-include - allow multiple extended selectors

[rdehuyss]

It would be really handy if hx-include could use multiple selectors, just like hx-trigger.

Reasoning:

• htmx by default submits everything in the closest <form> element. This confused me as the html spec says that forms may not be nested.
• I tried using nested <form> elements (to only submit a part for a partial update) but it is not allowed according to the spec and chrome does not support it
• so, in the end, I had to remove all forms and I use hx-include to only post the input fields nested inside a div. But in that case, I cannot include another input field that is not part of that div but global.

[rdehuyss]

Relates to https://github.com/bigskysoftware/htmx/issues/1754

[Telroshan]

htmx by default submits everything in the closest form element. This confused me as the html spec says that forms may not be nested.

Please note this is the case for non-GET requests but most importantly for "isolated inputs", as a form's closest form is that very form itself. As per the closest' doc:

Returns the closest ancestor Element or itself, which matches the selectors.

https://github.com/bigskysoftware/htmx/blob/f9b3f883576c979b533ed657b8a7556c3b1982e4/src/htmx.js#L3416-L3419

The idea here is that if you make a non-GET hx- request on an input that is inside a form, it's very likely that you'll want the full context along, i.e. the parent form's data. If the request comes from a form already, this won't do anything as the closest form is that same form. You should indeed not use nested form elements and we don't encourage this at all.

As for hx-include, you should already be able to use multiple selectors. As per the doc:

A CSS query selector of the elements to include. A standard CSS selector resolves to document.querySelectorAll and will include multiple elements, while the extended selectors such as find or next only return a single element at most to include

Which means any standard CSS selector matching multiple elements, will return those multiple elements. The exception here are the extended selectors that htmx provides (closest, find, next, previous) which for now are limited to a single selector. But using IDs you may totally reach your goal using hx-include="#container1 .something, #container2" for example.

The reason that hx-trigger has this "multiple triggers" section is the doc is because it supports a mini-language syntax with the from modifier for example, among other modifiers.

Hope this helps!

[rdehuyss]

@Telroshan, thank you so much for the swift feedback, detailed info and all the help here. You are a 🦸 (hero 😊).

I'm aware of the fact that this is for all but hx-get AJAX requests and happy to read that nested forms are not encouraged. I think my confusion comes from the docs that mention the closest form which I interpreted as you can nest them.

I was trying the following and as it uses the extended selector, this indeed does not work: hx-include="closest div.columns, #container2"

I shall rename the issue to reflect this feature request.