如何无delay实现HTMX点击更新表单输入并提交？

原实现场景 #

我在HTML表单中使用htmx，页面结构如下：

<form id="my_form" method="post"  hx-post="{{ MY_TARGET_URL }}" hx-trigger="click from:.btn delay:100ms">
   <input type="hidden" name="state" value="" id="id_state">
   <!-- 表单包含其他输入项 -->
</form>

<button type="button" class="btn" id="btn1" data-state="1">Submit 1</button>
<button type="button" class="btn" id="btn2" data-state="2">Submit 2</button>

配套JavaScript代码：

document.querySelectorAll(".btn").forEach((element) => {
  element.addEventListener("click", () =>
    document.getElementById("id_state").value = element.dataset.state;
  );
});

当前方案通过100ms延迟确保隐藏字段更新后再提交，但不够简洁，以下是几种无需delay的优化方案：

方案1：用hx-vals直接传递参数（无额外JS和隐藏字段） #

完全抛弃隐藏输入框，利用htmx的hx-vals特性，让按钮直接携带state参数触发表单提交：

<form id="my_form" method="post" hx-post="{{ MY_TARGET_URL }}">
   <!-- 表单包含其他输入项 -->
</form>

<button type="button" class="btn" hx-post="{{ MY_TARGET_URL }}" hx-vals='{"state": "1"}'>Submit 1</button>
<button type="button" class="btn" hx-post="{{ MY_TARGET_URL }}" hx-vals='{"state": "2"}'>Submit 2</button>

点击按钮时，htmx会自动将表单原有字段与hx-vals中的参数合并后发送请求，无需任何额外JS，也不需要delay。

方案2：利用htmx:beforeRequest事件钩子同步更新 #

如果需要保留隐藏字段结构，可通过htmx的请求前事件钩子，在提交前同步更新字段值：

修改后的HTML #

<form id="my_form" method="post" hx-post="{{ MY_TARGET_URL }}" hx-trigger="click from:.btn">
   <input type="hidden" name="state" value="" id="id_state">
   <!-- 表单包含其他输入项 -->
</form>

<button type="button" class="btn" id="btn1" data-state="1">Submit 1</button>
<button type="button" class="btn" id="btn2" data-state="2">Submit 2</button>

简化后的JavaScript #

document.getElementById('my_form').addEventListener('htmx:beforeRequest', function(evt) {
  const triggerBtn = evt.detail.trigger;
  if (triggerBtn.classList.contains('btn')) {
    document.getElementById('id_state').value = triggerBtn.dataset.state;
  }
});

该方案在htmx发送请求前触发钩子，先更新隐藏字段再提交，完全不需要依赖delay，且JS只需绑定一次表单事件，无需遍历所有按钮。

方案3：将按钮设为表单提交按钮（用form属性关联） #

通过form属性将按钮与表单绑定，并用hx-on直接在按钮上绑定字段更新逻辑：

<form id="my_form" method="post" hx-post="{{ MY_TARGET_URL }}">
   <input type="hidden" name="state" value="" id="id_state">
   <!-- 表单包含其他输入项 -->
</form>

<button type="submit" form="my_form" class="btn" hx-on:click="document.getElementById('id_state').value = '1'">Submit 1</button>
<button type="submit" form="my_form" class="btn" hx-on:click="document.getElementById('id_state').value = '2'">Submit 2</button>

点击按钮时会先执行hx-on中的更新逻辑，再触发表单的htmx提交，无需delay和额外JS文件，结构简洁直观。

内容的提问来源于stack exchange，提问作者scūriolus