Home > Mobile >  HTMX pass button value from selected list
HTMX pass button value from selected list

Time:04-25

I'm trying to make an application with Django using htmx. I have created a dropdown list as:

<select  name="fields" hx-get="{% url 'select_field' %}" hx-trigger="change" hx-target="#Wells">
            <option selected>Select a field</option>
            {% for Field in TFTFields %}
            <option ue="{{Field.Perimeter}}">{{Field.Perimeter}}</option>
            {% endfor %}
 </select>

Now I want to take the selected value from this list and pass it to a button to excite another function called "plotlybar", I did something like this:

<button  hx-get="{% url 'plotlybar' %}" hx-target="#plotlybar">Plot the bar Well Serv</button>

So now I didn't know how to pass this selected items? any hints or solution?

All my best

CodePudding user response:

You can include additional form elements in a HTMX request via hx-include attribute that uses CSS query selectors:

<button  
        hx-get="{% url 'plotlybar' %}"
        hx-include="[name='fields']"
        hx-target="#plotlybar">
  Plot the bar Well Serv
</button>

If you want to include multiple elements, provide a comma separated list of selectors, e.g.: [name='field1'], [name='field2'].

  • Related