CODEWITHSUNDEEP
htmx
Iustinian Olaru
Iustinian Olaru

Reputation: 1337

Referencing input value by name in HTMX

I've started looking into using HTMX recently and I've ran accross a problem that I can't figure out. Essentially I have a select element which I use to make an http POST whenever the user makes a selection. In order to make that post however, I need to provide a token which is stored in the input about the select. Is there a way for me to reference in HTMX syntax the input from above using it's name "csrfmiddlewaretoken"?

enter image description here

Upvotes: 1

Views: 3478

Answers (1)

Iustinian Olaru
Iustinian Olaru

Reputation: 1337

So I figured out what my trouble was. In order for me to expand the payload of the hx-post request, what I needed to do was include the HTML elements that I wanted the contents of in the hx-post request. To do that you can use the hx-include attribute on the request emiting element, which references other elements by name and takes their value in the payload as a {name: value} pair.

<select name="sample_select" hx-post="link" hx-include="[name='csrfmiddlewaretoken']" hx-trigger="changed">...

The example select above would issue an HTTP Post request when the value of the select element would be changed. The request payload would then be

{
 sample_select: selected_value;
 csrfmiddlewaretoken: value
}

Keep in mind that if you have multiple elements on the same page with the same name, when you reference the name in the hx-include attribute then the HTMX library will take all the values from all the elements in the payload. I have not found a way to reference a specific element, or the closest one yet but if you know of a way please share.

Upvotes: 2

Related Questions