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

[BoPeng]

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

• the documentation of hx-vals does not mention hx-post. All examples use hx-get.
• the documentation of hx-post does not mention hx-vals (or hx-include).
• explanation of parameters mentions hx-include but not hx-vals.

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.

[corlaez]

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.

[BoPeng]

The gotta I had was using

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

which was silently ignored. Only

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

was valid.

[andryyy]

The first of both is not valid JSON.

It must be quoted by "

[migliori]

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

[jantari]

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.

[Lord-Y]

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

[odanoburu]

@Lord-Y The feature is there, just the documentation is missing. I too had gone the hidden input field route before finding out about hx-vals…

[Telroshan]

PRs to improve documentation are always welcome if you feel like it btw!

[esrid]

It took me two days to debug this due to the same issue with hx-post. You really should make this clear.

[yujiteshima]

Hi, I've created a PR to address this issue.

I added two new sections to the hx-vals documentation:

1. "Using hx-vals with hx-post" - Example with hx-post and explanation of how values are sent differently for GET (query params) vs non-GET (request body) requests

2. "JSON Syntax Requirements" - Documents the common pitfall of using single quotes inside JSON which silently fails, with correct/incorrect examples

PR: #3619