htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Documentation on the use of hx-vals for hx-post is lacking

Open BoPeng opened this issue 2 years ago • 9 comments

I was trying to confirm if hx-vals can be used for hx-post and noticed that

It would be helpful to clarify the use of hx-vals with hx-post since it can be easier to use than hx-include in some scenarios.

BoPeng avatar Nov 18 '22 15:11 BoPeng

It's a good idea. There are also some gotchas in how hx-vals can send the values as query params or body depending on the verb used. I would prefer I had something like hx-query-vals and hx-body-vals, similar to how we have a header specific attribute. But anyways that's besides the point.

corlaez avatar Jun 13 '23 03:06 corlaez

The gotta I had was using

hx-vals="{'key': 'value'}"

which was silently ignored. Only

hx-vals='{"key": "value"}'

was valid.

BoPeng avatar Jun 13 '23 03:06 BoPeng

The first of both is not valid JSON.

It must be quoted by "

andryyy avatar Jun 13 '23 04:06 andryyy

It would be useful to add some examples of use, for instance with Javascript functions, I.e.: hx-vals="js:{width: getWidth()}"

migliori avatar Sep 16 '23 18:09 migliori

The docs for hx-vals mention twice how "by default, the value of hx-vals must be valid JSON".

Ok I understand this default, but I cannot find documentation anywhere on how to change this and allow myself to just POST any plaintext such as hx-vals="rawstring" in the request body? What are the other, non-default options for hx-vals? Is it just either JSON or dynamic js:? If so, the wording could be clearer.

jantari avatar Sep 26 '23 20:09 jantari

Looking forward for this feature too. For my purpose, I created an hidden input field to make the job done.

Lord-Y avatar Dec 31 '23 12:12 Lord-Y