带有 table 的 HTMX 表单提交

Question

我正在尝试通过 table.

将 Click to Edit 示例与 HTMX 结合使用

每一行 (<tr>) 都是一条数据库记录，如下所示：

<tr hx-target="this" hx-swap="outerHTML">
<form>
        <td><input type="text" name="name" value="{{row.name}}"></td>
        <td><input type="text" name="email" value="{{row.email}}"></td>
        <td>
          <button class="btn" hx-put="/edit/{{row.id}}">Update<buttun>
          <button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
        </td>
</form>
</tr>

不幸的是，当我在 flask 服务器上使用 request.form.keys 打印请求正文时，我发现请求是空的 ([])

点击按钮似乎没有触发所有输入字段的表单提交。

如何让按钮点击触发填写所有字段的表单提交？

Answer 1

你能post chrome 或 firefox 控制台的请求是什么样的吗？

总的来说，这看起来是正确的。

Answer 2

啊，刚记起来：您在这里使用 tables。不幸的是 tables 对其中的元素非常挑剔，我敢打赌表格在你放置它的地方不起作用。如果你检查 DOM 我打赌你会发现那里实际上没有表单元素，所以 htmx 找不到它来包含输入。

您需要对此进行返工，以不同的方式包含值，例如使用 hx-include.

像这样：

<tr hx-target="this" hx-swap="outerHTML">
        <td><input type="text" name="name" value="{{row.name}}"></td>
        <td><input type="text" name="email" value="{{row.email}}"></td>
        <td>
          <button class="btn" hx-put="/edit/{{row.id}}"
                  hx-include="closest tr">
              Update
          <button>
          <button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
        </td>
</tr>

如果您愿意从 table 行切换到 div，您原来的代码应该可以正常工作。

这是一个不幸的情况，tables 不是很灵活。

update：@guettli 提醒我你可以包含任何元素，它将包含它下面的所有输入，所以你可以在 [=] 中使用 closest tr 11=] 属性。谢谢！

带有 table 的 HTMX 表单提交

HTMX form submission with a table

flask

jinja2

htmx