表单action未跳转至指定页面的原因排查请求

1. e.preventDefault() 直接阻止了默认提交行为 #

你的onSubmitForm函数第一行就调用了e.preventDefault()，这个方法的核心作用就是终止表单的默认提交流程——包括浏览器自动跳转到action属性指定的/payment路径。这是导致action完全失效的核心原因。

对应代码里的关键行：

async function onSubmitForm(e){
    e.preventDefault(); // 这行直接阻断了表单的默认跳转逻辑
    // ... 其余异步请求代码
}

2. 表单结构存在两处致命错误 #

• form标签未闭合：你的代码里写的是</form，缺少了闭合符号>，完整的闭合标签应该是</form>，标签未闭合会导致浏览器解析表单结构异常，无法识别完整的表单范围。
• 提交按钮不在form标签内部：当前的<button>元素被写在了form标签外面，默认情况下，只有位于form内部、且未指定type="button"的按钮，才会触发表单的提交事件。现在这个按钮不属于表单的一部分，连触发表单提交的资格都没有。

修正后的基础表单结构示例：

<form action="/payment" onSubmit={onSubmitForm}>
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        <input />
    </div>
    <button className="w-full bg-purple-500 py-3 text-center text-white">
        Register Now
    </button>
</form>

兼顾异步请求与action跳转的方案 #

如果想既完成fetch异步请求，又让浏览器跳转到/payment，可以在请求成功后手动触发表单提交：

async function onSubmitForm(e){
    e.preventDefault(); // 先阻止默认行为，完成异步请求
    try {
        const response = await fetch("http://localhost:5000/user", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })
        console.log("res: ", response.body)
        // 请求成功后，手动触发表单默认提交，执行action跳转
        e.target.submit();
    } catch (error) {
        console.log("EROR: ", error.message)
    }
}

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