How to send variables from X-DATA to the server. Alpine JS & HTMX & Django? - django

Question

I have got the next snippet. There are a few select blocks. What I would like to do is to collect both variables and send to the Django server. But the request.GET is empty. What is wrong?
<div class="flex" x-data="{ foo: '', bar: ''}">
<div class="flex justify-between">
<div class="mt-1">
<select x-model="foo"
name="foo"
id="foo"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">Type of FOO</option>
<option value="FOO_1">FOO_1</option>
<option value="FOO_2">FOO_2</option>
<option value="FOO_1">FOO_3</option>
</select>
</div>
<div class="mt-1">
<select name="bar"
x-model="bar"
id="bar"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">BAR Types</option>
<option value="BAR_1">BAR_1</option>
<option value="BAR_2">BAR_2</option>
<option value="BAR_3">BAR_3</option>
</select>
</div>
<input type="text" name="foo" x-model="foo" hidden />
<input type="text" name="bar" x-model="bar" hidden />
<button
hx-get="{% url 'server:parse-values' %}"
hx-target="#element"
hx-swap="innerHTML"
hx-include="[name='foo', name='bar']">
<span
class="cursor-pointer px-3 py-3 border-2">Parse details</span>
</button>
</div>
</div>
But when I click on the button the Django backend does not receive foo and bar parameters.
Any thoughts?

Answer 1

To include multiple inputs you need to separate them with a comma like this:
hx-include="input[name='foo'], input[name='bar']"
That would be the equivalent of using querySelectorAll to grab your inputs:
document.querySelectorAll("input[name='foo'], input[name='bar']")
I added the additional input so it excludes the select lists, but you can probable remove the hidden inputs from your example and just include the lists.
I should also add that if you move the htmx attributes from the button to the x-data div and change that into a form. Then change the button to type submit. All the form data will be automatically sent to the server.
<form class="flex" x-data="{ foo: '', bar: ''}"
hx-get="{% url 'server:parse-values' %}"
hx-target="#element"
hx-swap="innerHTML"
>
<div class="flex justify-between">
<div class="mt-1">
<select x-model="foo"
name="foo"
id="foo"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">Type of FOO</option>
<option value="FOO_1">FOO_1</option>
<option value="FOO_2">FOO_2</option>
<option value="FOO_1">FOO_3</option>
</select>
</div>
<div class="mt-1">
<select name="bar"
x-model="bar"
id="bar"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">BAR Types</option>
<option value="BAR_1">BAR_1</option>
<option value="BAR_2">BAR_2</option>
<option value="BAR_3">BAR_3</option>
</select>
</div>
<button type="submit">
<span class="cursor-pointer px-3 py-3 border-2">Parse details</span>
</button>
</form>