HTMX 表单提交与表格

Posted 2023-05-07

【中文标题】HTMX 表单提交与表格

【英文标题】：HTMX form submission with a table

【发布时间】：2021-11-08 08:50:56

【问题描述】：

我正在尝试通过使用表格将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 的请求正文时，我看到请求是空的 ([])

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

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

【参考方案1】：

啊，刚刚记住了：您在这里使用表格。不幸的是，表格对其中的元素非常挑剔，我敢打赌表格在你放置的地方不起作用。如果您检查 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>

如果您愿意从表格行切换到 div，您拥有的原始代码应该可以正常工作。

这是一种不幸的情况，表格不是很灵活。

更新：@guettli 提醒我你可以包含任何元素，它会包含它下面的所有输入，所以你可以在 hx-include 属性中使用 closest tr。谢谢！

【讨论】：

我有一个使用 htmx 的地方，就像这样：每个 TR 标签的行为都像一个表单。工作正常。如果你想提供 oob 数据，那么你可能需要 htmx.config.useTemplateFragments

谢谢你，hx-include 属性就像一个魅力

【参考方案2】：

你能从 chrome 或 firefox 控制台发布请求的样子吗？

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

【讨论】：

错误在服务器端，email 和 name 字段没有被发布到服务器