django 我如何发送表单类型到输入使用htmx?

46qrfjad  于 2023-05-19  发布在  Go
关注(0)|答案(1)|浏览(86)

我有一个搜索输入和排序选择。我把它 Package 成形式。如何通过输入搜索输入(hx-trigger=“keyup changed delay:150 ms”)或在select(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>
63lcw9qa

63lcw9qa1#

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

hx-include="closest form"

在这两种情况下,将表单中所有字段值都包含在请求中。
这也可以给予您更好地控制hx-target以及如何触发更改(如果单独定义它们)。
参考:https://htmx.org/attributes/hx-include/

相关问题