如何使用 htmx 按类型将表单发送到输入中?

问题描述 投票:0回答:1

我有一个搜索输入和排序选择。我把它包装成表格。我如何通过在搜索输入中键入 (hx-trigger="keyup changed delay:150ms") 或在选择中选择另一个项目 (hx-trigger="changed") 来发送表单。我需要从这两个元素发送数据。 这是我的代码:

<form hx-get="{% url 'search-spec' %}" hx-target="#search-results" hx-trigger="keyup delay:150ms changed">
    <div class="search w-100 mt-4 d-flex justify-content-center">
        <div class="input-group rounded w-75 shadow-4-soft">
            <span class="input-group-text me-2" id="search-addon">
                <i class="fas fa-search"></i>
            </span>
            <input type="search" class="form-control rounded" placeholder="Начните набирать..." name="q" id="q"/>
        </div>
    </div>
    <div class="search w-100 mt-2 d-flex justify-content-center">
        <span class="input-group-text me-2" id="search-addon">
            <i class="fas fa-sort"></i>
        </span>
        <select name="sort" id="sort" value="0" class="form-select w-50">
            <optgroup label="По дате публикации">
                <option value="0">Последние публикации</option>
                <option value="1" selected>Первые публикации</option>
            </optgroup>
            <optgroup label="По обозначению">
                <option value="2">Обозначение 0-9</option>
                <option value="3">Обозначение 9-0</option>
            </optgroup>
            <optgroup label="По наименованию">
                <option value="4">Наименование А-Я</option>
                <option value="5">Наименование Я-А</option>
            </optgroup>
        </select>
    </div>
</form>
python html django forms htmx
1个回答
0
投票

您可以在输入中分别定义两个 hx 标签并选择然后使用

hx-include="closest form"

在两者中,在请求中包含该表单中的所有字段值。

这还可以让您更好地控制 hx-target 以及如何触发更改,当您单独定义它们时。

参考: https://htmx.org/attributes/hx-include/

© www.soinside.com 2019 - 2024. All rights reserved.