htmx
htmx copied to clipboard
Documentation on the use of hx-vals for hx-post is lacking
I was trying to confirm if hx-vals can be used for hx-post and noticed that
- the documentation of
hx-valsdoes not mentionhx-post. All examples usehx-get. - the documentation of
hx-postdoes not mentionhx-vals(orhx-include). - explanation of
parametersmentionshx-includebut nothx-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.
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.
The gotta I had was using
hx-vals="{'key': 'value'}"
which was silently ignored. Only
hx-vals='{"key": "value"}'
was valid.
The first of both is not valid JSON.
It must be quoted by "
It would be useful to add some examples of use, for instance with Javascript functions, I.e.:
hx-vals="js:{width: getWidth()}"
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.
Looking forward for this feature too. For my purpose, I created an hidden input field to make the job done.