如何在表单action中传递当前URL的数字ID（非jQuery方案）

你的问题出在表单action属性的写法上：用javascript:redictURL('prefix')这种方式时，函数的返回值不会被表单当作提交路径，只是执行了函数但没触发正确的提交流程，导致POST请求发不出去。下面是两种可行的解决方法，都不需要jQuery：

方法一：页面加载时直接设置action #

页面加载完成后，直接提取URL中的ID并设置表单的action属性，适合ID不会动态变化的场景：

修改后的表单代码 #

<form id="prefix-form" method="post">
    <label for="prefix">Pre</label>
    <hr>
    <input type="text" name="prefix" id="email" placeholder="&&prefix&&" required>
    <input type="submit" value="" id="buttonPrefix">
</form>

对应的脚本 #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('prefix-form');
    // 从URL路径中提取ID（假设ID是路径中的第二个部分，比如路径是/123/prefix时，split后[1]就是123）
    const id = location.pathname.split('/')[1];
    // 设置表单的action属性
    form.action = `/${id}/prefix`;
});

方法二：监听提交事件动态设置action #

如果需要在提交前才确定ID（比如URL可能动态变化），可以监听表单的submit事件，在提交瞬间修改action：

表单代码和上面一致，脚本改为： #

const form = document.getElementById('prefix-form');
form.addEventListener('submit', function() {
    const id = location.pathname.split('/')[1];
    // 这里的this指向表单元素
    this.action = `/${id}/prefix`;
    // 不需要阻止默认事件，设置完action后表单会正常发送POST请求
});

为什么之前的写法无效 #

表单的action属性需要的是一个具体的URL地址，而javascript:伪协议在这里只会执行对应的脚本函数，不会把函数返回的字符串当作提交目标。所以之前的写法只是调用了redictURL函数，但没有让表单使用返回的路径去提交，自然发不出POST请求。

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