Why HTMX Sends All Input Values Instead of Specified Selector

[blasferna]

I've encountered a problem where I need to send only the input values located under the specified selector using hx-post, but unfortunately, HTMX seems to be sending all inputs instead of just those under the selector.

For instance, in the following code snippet, I intend to send only the values under the selector closest div.container, as specified in the b input:

<form hx-post="/path/view" hx-target="this" hx-swap="outerHTML">
  <input type="text" name="a">
  <div class="container">
    <input type="text" name="b" 
    hx-get="path/other-view" 
    hx-target="this" 
    hx-trigger="blur" 
    hx-swap="none"
    hx-include="closest div.container">
  </div>
  <input type="submit" value="Send">
</form>

In this scenario, the request is correctly sending only the values located under the closest div.container:

/path/other-view?b=The value

However, when I attempt to use hx-post with the b input, the request unexpectedly sends all input values:

<form hx-post="/path/view" hx-target="this" hx-swap="outerHTML">
  <input type="text" name="a">
  <div class="container">
    <input type="text" name="b" 
    hx-post="path/other-view" 
    hx-target="this" 
    hx-trigger="blur" 
    hx-swap="none"
    hx-include="closest div.container">
  </div>
  <input type="submit" value="Send">
</form>

The resulting request body includes all input values, not just those under the specified selector:

a=Other%20element&b=The%20value

Why is this happening? I only want to send the values under the selector even for post methods.

[andryyy]

Can you try hx-trigger="blur consume"?

[blasferna]

Hello @andryyy

Same result:

a=one&b=two

[andryyy]

Oh, and hx-params="b" probably works? On the very same inner text input.

[blasferna]

hx-params="b" works, but I have many inputs at the same level as the b input. Due to this, I opted for hx-include.

I expected the same behavior as hx-get, but for some reason, with hx-post, it sends the entire form.

Reading the documentation, I couldn't find any references to this behavior.

[andryyy]

I would need to test it by myself to get an idea why it happens.

You can also put the forms at the top of your document, without any content, and add 'form="your-form-id"' to the input/whatever.

Like this:

<form id="form1" hx-post="/path/somewhere"></form>
<form id="form2" hx-post="/path/elsewhere"></form>

<input form="form1" type="text" name="input1">
<input form="form2" type="text" name="input2">

This solves problems with inheritance and can improve readability.

[ethnoxcom]

Previously I needed to do the same and ended up using HTML classes and CSS selectors. Assigning a class to the input/textarea that I needed to send, e.g. class="input-control breq" and then define hx-include=".breq", that works like a charm.