form内submit按钮的disabled失效?

最新推荐文章于 2021-06-04 15:33:34 发布

IKnow00

最新推荐文章于 2021-06-04 15:33:34 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_40457310/article/details/79272016

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在网页表单提交后禁用提交按钮的方法，以避免用户重复提交。通过使用JavaScript监听表单的submit事件，并在事件触发时设置按钮的disabled属性为true来实现。同时介绍了如何通过阻止默认事件来观察禁用效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写表单时经常会为了防止多次提交, 而加入提交按钮一次点击后失效的功能,
但是新手的话有一点小问题要注意
比如下面的例子:

<form id='form1'>
<input type='text' name='content' />
<button type='submit' name='sub-btn'>Submit</button>
</form>

var form1 = docuemnt.getElementById('form1');
var input1 = form1.elements[0];

form1.addEventListener('submit', e => {
    var target = e.target;
    var btn = target.elements['sub-btn'];
    btn.disabled = true;
});

本来应该要实现的是点击按钮或者回车submit以后, 按钮变得不可选, 但是并没有实现, 为啥?
因为提交以后页面刷新了, 按钮以迅雷不及掩耳盗铃响叮当之势变到不可选又变回来了…
那么如何能看出效果呢?
最暴力的方式就是阻止submit的默认事件禁止刷新, 然后写自己的提交事件

form1.addEventListener('submit', e => {
    e.preventDefault();
    //...
})