在 HTMX 中按名称引用输入值

Posted 2023-05-07

【中文标题】在 HTMX 中按名称引用输入值

【英文标题】：Referencing input value by name in HTMX

【发布时间】：2022-01-18 16:54:27

【问题描述】：

我最近开始研究使用 HTMX，但遇到了一个我无法弄清楚的问题。本质上，我有一个 select 元素，每当用户进行选择时，我都会使用它来制作 http POST。然而，为了发布该帖子，我需要提供一个令牌，该令牌存储在关于 select 的 input 中。有没有办法让我在 HTMX 语法中使用名称“csrfmiddlewaretoken”引用上面的输入？

【问题讨论】：

您是否尝试将[name='csrf_token] 更改为[name='csrfmiddlewaretoken']。那应该行得通。此外，如果您将hx-post 移动到表单元素或包装选择和令牌输入的元素，则请求有效负载应包含两者。

是的，工作，需要更好地了解文档。我在表单中遇到的问题是我需要在 POST 方法中包含另一个值，并且在提交时使用 hx-vals 似乎不适用于表单

我很惊讶 hx-vals 没有工作。如果您在 hx-vals 中包含代码示例，我们可能会提供帮助。您还可以在代码示例中使用文本而不是图像吗？那张图片中的文字太小了。

我发现我误解了图书馆，需要更多阅读。我会发布我的问题的答案

【参考方案1】：

所以我弄清楚了我的问题所在。为了让我扩展 hx-post 请求的负载，我需要做的是在 hx-post 中包含我想要的内容的 html 元素要求。为此，您可以在发出请求的元素上使用 hx-include 属性，该属性按名称引用其他元素并将其在负载中的值作为 name: value 对。

<select name="sample_select" hx-post="link" hx-include="[name='csrfmiddlewaretoken']" hx-trigger="changed">... 

上面的示例 select 将在 select 元素的值发生更改时发出 HTTP Post 请求。请求有效负载将是

 sample_select: selected_value;
 csrfmiddlewaretoken: value

请记住，如果您在同一页面上有多个具有相同名称的元素，当您在 hx-include 属性中引用该名称时，HTMX 库将从所有元素中获取所有值有效载荷中的元素。我还没有找到引用特定元素的方法，或者最接近的方法，但如果你知道一种方法，请分享。