Hi guys,
so i have two input fields in my template:
<div class="mb-4">
<label for="userFilter" class="block text-sm font-medium text-gray-700">Filter Users:</label>
<input type="text" id="userFilter" name="userFilter" class="mt-1 p-2 border border-gray-300 rounded-md"
hx-trigger="input changed delay:200ms" hx-request="true" hx-get="{% url 'scope-details' scope_name=scope_name relation_id=relation_id %}" hx-target="#userTable" hx-vals='{"type": "username"}' hx-include="[name='triggerCheckbox']">
<input type="checkbox" id="triggerCheckbox" name="triggerCheckbox" value="yes" hx-trigger="change" hx-get="{% url 'scope-details' scope_name=scope_name relation_id=relation_id %}" hx-target="#userTable" hx-headers='{ "X-CSRFToken": "{{ csrf_token }}" }' hx-vals='{"type": "checkbox"}'>
<label for="triggerCheckbox">Show indirect users</label>
</div>
but i need to know values of both inputs whenever htmx request is being made so i combined these inputs into form element like so:
<div class="mb-4">
<form id="filterForm" hx-trigger="change" hx-get="{% url 'scope-details' scope_name=scope_name relation_id=relation_id %}" hx-target="#userTable" hx-headers='{ "X-CSRFToken": "{{ csrf_token }}" }'>
<label for="userFilter" class="block text-sm font-medium text-gray-700">Filter Users:</label>
<input type="text" id="userFilter" name="userFilter" class="mt-1 p-2 border border-gray-300 rounded-md" hx-trigger="input changed delay:200ms">
<input type="checkbox" id="triggerCheckbox" name="triggerCheckbox" value="yes" hx-trigger="change">
<label for="triggerCheckbox">Show indirect users</label>
</form>
</div>
I get both values, which is what i needed, but now htmx request doesn’t work when text input content changes. Any ideas how to make it work?