bigskysoftware/htmx

hx-get not sending form data

stukennedy opened this issue · 1 comments

According to the docs, it suggests that hx-params="*" is a default setting

The example shows:

<div hx-get="/example" hx-params="*">Get Some HTML, Including Params</div>

This div will include all the parameters that a POST would, but they will be URL encoded and included in the URL, as per usual with a GET.

hx-get doesn't work this way, it only sends variables when explicitly stated on the tag itself and doesn't look for the closest form.
The HTMX code below shows that it skips this for a GET.

Screenshot 2024-08-06 at 01 10 34

It seems to me that you'd want it to process the form the same way as the other requests do (as the docs suggest), in the spirit of HTMX which is making the HTTP more generic across all tags and verbs.
There are cases where you want to call a GET from a form submission to make cacheing easier.
There is a workaround by using hx-include="form", but that seems a bit unintuitive
<div hx-get="/example" hx-include="form">Get Some HTML, Including Params</div>

Is this intentional? Is there something I'm missing?

Hey, I agree this might be confusing, but there are different things in play here.
The parameters doc explain those subtleties:

Additionally, if the element causes a non-GET request, the values of all the inputs of the nearest enclosing form will be included.
If you wish to include the values of other elements, you can use the hx-include attribute with a CSS selector of all the elements whose values you want to include in the request.
If you wish to filter out some parameters you can use the hx-params attribute.
Finally, if you want to programmatically modify the parameters, you can use the htmx:configRequest event.

  • hx-params, lets you filter out parameters from your requests. That means, take all the parameters naturally included with the request, and remove everything that doesn't match the hx-params filter. For example, hx-params="*" (the default) will not include all values on the page.
  • On the other hand, a hx-include="*" will include all values on the page. You can use any CSS selector here or any htmx extended CSS selector, in your example you could use hx-include="closest form" instead, as hx-include="form" will include all forms on the page, which is probably not what you want

As for the reason GET requests get this special default of not including the closest form's values, I wasn't there when it was written but I'd suppose it's to avoid embedding potentially way too many values in the request's URL, as for a GET request, parameters are URL-encoded. For example, without this special default, a boosted link within a form, would update the URL of your current page to a potentially gigantic URL with a ton of unwanted parameters along. As URL values are way more limited in size that a request body, you could also get an error "by default" here depending on the amount of values. Just some suggestions, don't take my word for it ofc.