点击div触发htmx函数可行吗？表单提交问题求助

核心原因 #

div元素就算加上role="button"和type="submit"，也不属于原生表单控件，浏览器和htmx都不会自动把它的点击事件关联到表单提交逻辑上，所以点击没反应。

方案1：用htmx.trigger触发表单提交 #

你可以给div添加onclick事件，调用htmx.trigger来触发表单的submit事件——这个方式会让htmx捕获到提交事件，从而执行hx-post的AJAX逻辑，不会刷新页面。

htmx.trigger的用法很直接：第一个参数是目标元素的选择器，第二个参数是要触发的事件名。

修改后的代码：

<form id="search-form" hx-post="/search-api" hx-target="#search-result"></form>
<div class="search-wrapper">
    <div class="material-icons search-button md-8 md-light" role="button" onclick="htmx.trigger('#search-form', 'submit')">search</div>
    <div class="search-bar-wrapper">
         <textarea name="search" type="text" class="search-bar" id="search-bar" form="search-form" placeholder="search" oninput="autoResize(this)"></textarea>
    </div>
</div>
<div id="search-result"></div>

注意：别用原生JS的form.submit()，那会绕过htmx的事件监听，直接触发页面刷新，达不到你要的效果。

方案2：直接给div加htmx属性（无需form） #

也可以去掉独立的form元素，直接在div上配置htmx的提交属性，用hx-include关联输入框：

<div class="search-wrapper">
    <div class="material-icons search-button md-8 md-light" role="button" hx-post="/search-api" hx-target="#search-result" hx-include="#search-bar">search</div>
    <div class="search-bar-wrapper">
         <textarea name="search" type="text" class="search-bar" id="search-bar" placeholder="search" oninput="autoResize(this)"></textarea>
    </div>
</div>
<div id="search-result"></div>

点击div时，htmx会自动收集#search-bar的内容，发送POST请求到指定接口，更新目标区域。

为什么改成button是更好的选择 #

你之前把div改成button的方案其实更推荐：button是原生表单提交控件，自带提交语义，无障碍支持更好，不需要额外JS就能让htmx识别并处理提交逻辑，只需要调整样式就行。

内容的提问来源于stack exchange，提问作者6plosive