能,formmethod属性可用javascript动态修改,但仅影响submit按钮点击时的提交方式,需在点击前设置,且只对type="submit"有效;修改方式为btn.formmethod='post'或btn.setattribute('formmethod','get')。

formmethod属性能用JavaScript动态修改吗
能,但要注意它只影响按钮点击时的提交行为,不改变表单本身的method属性。浏览器会以按钮上当前的formmethod值为准,覆盖表单默认方式。
直接改formmethod属性的写法
最简单的方式是操作element.formMethod(注意大小写)或element.setAttribute():
const btn = document.querySelector('button[type="submit"]');
// 方式1:用属性名驼峰写法
btn.formMethod = 'POST';
// 方式2:用setAttribute(更通用,兼容旧写法)
btn.setAttribute('formmethod', 'GET');
常见错误现象:btn.setAttribute('formMethod', 'POST')无效——HTML属性名是formmethod(全小写),不是formMethod;而DOM属性名才是formMethod(驼峰)。混用会导致静默失败。
什么时候改才生效
必须在点击前完成修改,且仅对下一次提交生效。以下情况不会触发重置:
- 表单已开始提交(比如在
submit事件里改,来不及) - 按钮被禁用(
disabled状态下点击不触发提交) - 页面刷新后,
formmethod恢复为HTML中写的初始值
典型使用场景:同一按钮切换「预览」(GET带参数跳转)和「正式提交」(POST发数据),靠一个开关变量控制:
let isPreviewMode = true;
document.getElementById('submitBtn').addEventListener('click', function(e) {
this.formMethod = isPreviewMode ? 'GET' : 'POST';
});
兼容性和替代方案
formmethod在IE10+、Edge、Chrome、Firefox、Safari均支持,但部分老Android WebView可能忽略该属性。如果遇到兼容问题,更稳妥的做法是:
- 不用
formmethod,改用e.preventDefault()+ 手动fetch()或form.submit() - 动态改
form.method本身(但会影响所有提交按钮,不够精细) - 用两个隐藏按钮分别配
formmethod="GET"和formmethod="POST",JS切换hidden状态
真正容易被忽略的是:formmethod只对type="submit"有效,type="button"或type="reset"设了也无用。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











