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

huangapple
go评论129阅读模式
英文:

How can i send form by type into input using htmx?

问题

这是您的代码，已经进行了中文翻译：

  1. <form hx-get="{% url 'search-spec' %}" hx-target="#search-results" hx-trigger="keyup changed delay:150ms">
  2.     <div class="search w-100 mt-4 d-flex justify-content-center">
  3.         <div class="input-group rounded w-75 shadow-4-soft">
  4.             <span class="input-group-text me-2" id="search-addon">
  5.                 <i class="fas fa-search"></i>
  6.             </span>
  7.             <input type="search" class="form-control rounded" placeholder="开始输入..." name="q" id="q"/>
  8.         </div>
  9.     </div>
  10.     <div class="search w-100 mt-2 d-flex justify-content-center">
  11.         <span class="input-group-text me-2" id="search-addon">
  12.             <i class="fas fa-sort"></i>
  13.         </span>
  14.         <select name="sort" id="sort" value="0" class="form-select w-50">
  15.             <optgroup label="按发布日期">
  16.                 <option value="0">最新发布</option>
  17.                 <option value="1" selected>最早发布</option>
  18.             </optgroup>
  19.             <optgroup label="按标志">
  20.                 <option value="2">标志 0-9</option>
  21.                 <option value="3">标志 9-0</option>
  22.             </optgroup>
  23.             <optgroup label="按名称">
  24.                 <option value="4">名称 A-Z</option>
  25.                 <option value="5">名称 Z-A</option>
  26.             </optgroup>
  27.         </select>
  28.     </div>
  29. </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:

  1. &lt;form hx-get=&quot;{% url &#39;search-spec&#39; %}&quot; hx-target=&quot;#search-results&quot; hx-trigger=&quot;keyup delay:150ms changed&quot;&gt;
  2.     &lt;div class=&quot;search w-100 mt-4 d-flex justify-content-center&quot;&gt;
  3.         &lt;div class=&quot;input-group rounded w-75 shadow-4-soft&quot;&gt;
  4.             &lt;span class=&quot;input-group-text me-2&quot; id=&quot;search-addon&quot;&gt;
  5.                 &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
  6.             &lt;/span&gt;
  7.             &lt;input type=&quot;search&quot; class=&quot;form-control rounded&quot; placeholder=&quot;Начните набирать...&quot; name=&quot;q&quot; id=&quot;q&quot;/&gt;
  8.         &lt;/div&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;search w-100 mt-2 d-flex justify-content-center&quot;&gt;
  11.         &lt;span class=&quot;input-group-text me-2&quot; id=&quot;search-addon&quot;&gt;
  12.             &lt;i class=&quot;fas fa-sort&quot;&gt;&lt;/i&gt;
  13.         &lt;/span&gt;
  14.         &lt;select name=&quot;sort&quot; id=&quot;sort&quot; value=&quot;0&quot; class=&quot;form-select w-50&quot;&gt;
  15.             &lt;optgroup label=&quot;По дате публикации&quot;&gt;
  16.                 &lt;option value=&quot;0&quot;&gt;Последние публикации&lt;/option&gt;
  17.                 &lt;option value=&quot;1&quot; selected&gt;Первые публикации&lt;/option&gt;
  18.             &lt;/optgroup&gt;
  19.             &lt;optgroup label=&quot;По обозначению&quot;&gt;
  20.                 &lt;option value=&quot;2&quot;&gt;Обозначение 0-9&lt;/option&gt;
  21.                 &lt;option value=&quot;3&quot;&gt;Обозначение 9-0&lt;/option&gt;
  22.             &lt;/optgroup&gt;
  23.             &lt;optgroup label=&quot;По наименованию&quot;&gt;
  24.                 &lt;option value=&quot;4&quot;&gt;Наименование А-Я&lt;/option&gt;
  25.                 &lt;option value=&quot;5&quot;&gt;Наименование Я-А&lt;/option&gt;
  26.             &lt;/optgroup&gt;
  27.         &lt;/select&gt;
  28.     &lt;/div&gt;
  29. &lt;/form&gt;

答案1

得分: 0

  1. 你可以在输入和选择中分别定义hx标签，然后在两者中使用

hx-include="closest form"

  2. 以便在请求中包括该表单中的所有字段值。
  4. 这样也可以让你更好地控制hx-target以及在你单独定义它们时如何触发变化。
  6. 参考链接:
  7. https://htmx.org/attributes/hx-include/
英文:

You can define both hx tags seperately in the input and select and then use

  1. hx-include=&quot;closest form&quot;

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.

Ref:
https://htmx.org/attributes/hx-include/

huangapple
  • 本文由 发表于 2023年5月17日 15:02:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76269339.html
  • django
  • forms
  • html
  • htmx
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定