英文:
How can i send form by type into input using htmx?
问题
这是您的代码，已经进行了中文翻译：
<form hx-get="{% url 'search-spec' %}" hx-target="#search-results" hx-trigger="keyup changed delay:150ms">
<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">名称 A-Z</option>
<option value="5">名称 Z-A</option>
</optgroup>
</select>
</div>
</form>
英文:
I have a search input and sort select. I wrapped it into form. How can i send form by typing into search input (hx-trigger="keyup changed delay:150ms") or selecting another item in select (hx-trigger="changed"). I need to send data from both of this elements.
Here is my code:
<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>
答案1
得分: 0
你可以在输入和选择中分别定义hx标签，然后在两者中使用
hx-include="closest form"
以便在请求中包括该表单中的所有字段值。
这样也可以让你更好地控制hx-target以及在你单独定义它们时如何触发变化。
参考链接:
https://htmx.org/attributes/hx-include/
英文:
You can define both hx tags seperately in the input and select and then use
hx-include="closest form"
in both, to include all field values from that form in the request.
This should also give you better control over hx-target and how you trigger changes, when you have them defined separately.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论