htmx表单提交异常：hx-post未指向正确路径，action属性正常

使用htmx提交表单时，设置hx-post="/signup"会导致表单提交到当前页面路径，而将hx-post替换为原生action="/signup"后，表单能正确提交到/signup路径。提交按钮为动态添加，两种场景下按钮功能均正常。

无法提交到正确路径的代码 #

<form hx-post="/signup" class="form" id="sign-up-form" name="signupform" hx-trigger="submit" hx-encoding="multipart/form-data" hx-swap="none" hx-target="this">
    <div class="p-4">
        <h5>Sign Up</h5>
        <label>Username:</label>
        <input class="form-control" autocomplete="username" type="text" name="usernamesignup"
            placeholder="Username" oninput="checkForValidSignUpSubmission()" required
            id="usernamesignupinput" />
    </div>
    <div class="p-4">
        <label>Email:</label>
        <input class="form-control" type="email" name="emailsignup" autocomplete="email"
            placeholder="email@example.com" oninput="checkForValidSignUpSubmission()" required
            id="emailsignupinput" maxlength="64" />
    </div>
    <div class="p-4">
        <label>Password:</label>
        <input class="form-control" type="password" name="passwordsignup"
            autocomplete="new-password" placeholder="Password"
            oninput="checkForValidSignUpSubmission()" required id="passwordsignupinput" />
    </div>
    <div class="p-4">
        <label>Confirm Password:</label>
        <input class="form-control" type="password" autocomplete="new-password"
            placeholder="Password" oninput="checkForValidSignUpSubmission()" required
            id="confirmpasswordsignupinput" name="confirmpasswordsignup" />
    </div>
    <div class="p-4">
        <label>Pick a profile picture</label>
        <input id="pfpimage" type="file" accept="image/*" name="pfpformfile" required />
    </div>
</form>

可提交到正确路径的代码 #

<form action="/signup" class="form" id="sign-up-form" name="signupform" hx-trigger="submit"
    hx-encoding="multipart/form-data" hx-swap="none" hx-target="this">
    <div class="p-4">
        <h5>Sign Up</h5>
        <label>Username:</label>
        <input class="form-control" autocomplete="username" type="text" name="usernamesignup"
            placeholder="Username" oninput="checkForValidSignUpSubmission()" required
            id="usernamesignupinput" />
    </div>
    <div class="p-4">
        <label>Email:</label>
        <input class="form-control" type="email" name="emailsignup" autocomplete="email"
            placeholder="email@example.com" oninput="checkForValidSignUpSubmission()" required
            id="emailsignupinput" maxlength="64" />
    </div>
    <div class="p-4">
        <label>Password:</label>
        <input class="form-control" type="password" name="passwordsignup"
            autocomplete="new-password" placeholder="Password"
            oninput="checkForValidSignUpSubmission()" required id="passwordsignupinput" />
    </div>
    <div class="p-4">
        <label>Confirm Password:</label>
        <input class="form-control" type="password" autocomplete="new-password"
            placeholder="Password" oninput="checkForValidSignUpSubmission()" required
            id="confirmpasswordsignupinput" name="confirmpasswordsignup" />
    </div>
    <div class="p-4">
        <label>Pick a profile picture</label>
        <input id="pfpimage" type="file" accept="image/*" name="pfpformfile" required />
    </div>
</form>

排查方向与解决方案 #

1. 升级htmx版本：部分旧版htmx存在hx-post路径解析的bug，建议更新到最新稳定版后重试。
2. 检查脚本冲突：查看浏览器控制台是否有htmx相关报错，确认页面中是否存在自定义脚本阻止了htmx的请求处理逻辑。
3. 双属性兼容配置：可以同时保留action="/signup"和hx-post="/signup"，让htmx优先使用hx-post的配置，同时保留原生提交作为 fallback。
4. 重新初始化htmx：如果表单或按钮是动态加载的，确保在DOM更新后调用htmx.process(document.getElementById('sign-up-form'))，让htmx重新识别表单属性。

内容的提问来源于stack exchange，提问作者Zach Anton