2

我正在尝试通过使用表格来使用带有 HTMX的Click to Edit示例。

每行 ( <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>

不幸的是，当我在服务器request.form.keys上打印请求正文时flask，我看到请求是空的（[]）

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

如何使按钮单击触发填充所有字段的表单提交？

4

2 回答 2

3

啊，刚刚记起来了：你在这里处理表格。不幸的是，表格对其中的元素非常挑剔，我敢打赌表格在你放置的地方不起作用。如果您检查 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 提醒我，您可以包含任何元素，它将包含其下方的所有输入，因此您可以closest tr在hx-include属性中使用。谢谢！

于 2021-09-13T12:37:02.940 回答
0

您可以从 chrome 或 firefox 控制台发布请求的样子吗？

一般来说，这看起来是正确的。

于 2021-09-13T01:47:30.423 回答