为了账号安全,请及时绑定邮箱和手机立即绑定

我想在提交后立即禁用提交按钮

我想在提交后立即禁用提交按钮

ITMISS 2023-08-24 10:03:29
我想在提交后立即禁用“提交按钮”。这是我写的,但它不起作用。你能告诉我问题是什么吗?<div>    <form id="manual_form" action="" method="POST">        <button id="button" type="submit" name="manual_start">SUBMIT!</button>    </form></div><hr><script type="text/javascript">    let manual_form = document.getElementById('manual_form');    let manual_button = document.getElementById('button');    manual_form.addEventListener('submit', (evt) => {        console.log('submitted!');        manual_button.disabled = true;    }, false);</script>
查看完整描述

3 回答

?
拉莫斯之舞

TA贡献1820条经验 获得超10个赞

当您单击该submit按钮时,页面将重新加载。这就是为什么您看不到该disabled属性正在运行的原因。evt.preventDefault();您可以在事件Handler中添加以防止重新加载


let manual_form = document.getElementById('manual_form');

let manual_button = document.getElementById('button');


manual_form.addEventListener('submit', (evt) => {

  evt.preventDefault();

  console.log('submitted!');

  manual_button.disabled = true;

}, false);

<div>

  <form id="manual_form" action="" method="POST">

    <button id="button" type="submit" name="manual_start">SUBMIT!</button>

  </form>

</div>

<hr>


查看完整回答
反对 回复 2023-08-24
?
炎炎设计

TA贡献1808条经验 获得超4个赞

submit可以使用该setAttribute()方法通过分配适当的属性来禁用它们disabled。在你的情况下,它将是这样的:


...

manual_button.setAttribute('disabled', 'disabled');

...

let manual_form = document.getElementById('manual_form');

    let manual_button = document.getElementById('button');


    manual_form.addEventListener('submit', (evt) => {

        evt.preventDefault();

        console.log('submitted!');

        manual_button.setAttribute('disabled', 'disabled');

    }, false);

<div>

    <form id="manual_form" action="" method="POST">

        <button id="button" type="submit" name="manual_start">SUBMIT!</button>

    </form>

</div>

<hr>


查看完整回答
反对 回复 2023-08-24
?
开满天机

TA贡献1786条经验 获得超12个赞

JavaScript 方面的工作方式与表单有关...刷新页面时会抛出错误。添加evt.preventDefault();事件监听函数以阻止页面刷新。该按钮被禁用。



查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 110 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信