Htmx request when form input values change

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?