`hx-vals` fails to parse `this.value` for POST request on select object about htmx HOT 4 CLOSED

in your first example it reported that the format you specified was not valid json because you had not used the js: or javascript: prefixes to activate hx-vals javascript evaluate feature.

In the second example the value of this.value evaluated to undefined which will throw this error. When it runs the evaluate it runs the eval in global scope where this = window and window does not have a value. To test how it might work just enter the browser dev tools and go to the console of the running application and anything you type into the console here will also be in that same global window state so you can test what works manually this way. often you write a global function to get the data you want to return and then call that function in your hx-vals.

from htmx.

Alse, replacing by hx-vals='js:{question_type: this.value}' raises a different error:

htmx.org@2.0.2:1 Uncaught 
TypeError: Cannot read properties of undefined (reading 'forEach')
    at Ln (htmx.org@2.0.2:1:37346)
    at he (htmx.org@2.0.2:1:41107)
    at htmx.org@2.0.2:1:22304
    at HTMLSelectElement.i (htmx.org@2.0.2:1:21340)
Ln	@	htmx.org@2.0.2:1
he	@	htmx.org@2.0.2:1
(anonymous)	@	htmx.org@2.0.2:1
i	@	htmx.org@2.0.2:1

from htmx.

found a solution using name=:

hx-post="{% url 'app:update_question_type' pk=question.pk %}"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-trigger="change"
name="question_type"

Also, looked up in the code, and saw that the hx-vals element only runs JS if used the js: tag, but is strange the error outputed in the comment above. Would be nice if added to the documentation some examples using POST requests :)

from htmx.

in your first example it reported that the format you specified was not valid json because you had not used the js: or javascript: prefixes to activate hx-vals javascript evaluate feature.

In the second example the value of this.value evaluated to undefined which will throw this error. When it runs the evaluate it runs the eval in global scope where this = window and window does not have a value. To test how it might work just enter the browser dev tools and go to the console of the running application and anything you type into the console here will also be in that same global window state so you can test what works manually this way. often you write a global function to get the data you want to return and then call that function in your hx-vals.

Hmmmmm that's very elucidative actually! Thank you!

from htmx.