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

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  x-data="{ foo: '',  bar: ''}">
  <div >
    <div >

      <select x-model="foo"
              name="foo"
              id="foo"
              >
        <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 >
      <select name="bar"
              x-model="bar"
              id="bar"
              >
        <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
      >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?

CodePudding user response：

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  x-data="{ foo: '',  bar: ''}" 
        hx-get="{% url 'server:parse-values' %}"
        hx-target="#element"
        hx-swap="innerHTML"
    >
        <div >
            <div >

            <select x-model="foo"
                    name="foo"
                    id="foo"
                    >
                <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 >
            <select name="bar"
                    x-model="bar"
                    id="bar"
                    >
                <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 >Parse details</span>
        </button>
</form>