Как отправить переменные из X-DATA на сервер. Alpine JS & HTMX & Django?

У меня получился следующий фрагмент. В нем есть несколько блоков select. То, что я хотел бы сделать, это собрать обе переменные и отправить на сервер Django. Но request.GET пуст. Что не так? 

<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>

Но когда я нажимаю на кнопку, бэкенд Django не получает параметры foo и bar.

Есть мысли?

Чтобы включить несколько входов, необходимо разделить их запятой следующим образом:

hx-include="input[name='foo'], input[name='bar']"

Это было бы эквивалентно использованию querySelectorAll для захвата ваших входных данных:

document.querySelectorAll("input[name='foo'], input[name='bar']")

Я добавил дополнительные input, чтобы исключить списки select, но вы можете, вероятно, удалить скрытые входы из вашего примера и включить только списки.

Я также должен добавить, что если вы перенесете атрибуты htmx из кнопки в x-data div и измените его на форму. Затем измените кнопку на тип submit. Все данные формы будут автоматически отправлены на сервер.

<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>
Вернуться на верх