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

Question

我想在提交后立即禁用 SUBMIT-BUTTON。这是我写的，它不起作用。你能告诉我问题出在哪里吗？

<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>

Answer 1

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

...
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>

Answer 2

当您单击 submit 按钮时，页面会重新加载。这就是为什么您看不到 disabled 属性的原因。您可以在事件处理程序中添加 evt.preventDefault(); 以防止重新加载

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>

Answer 3

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

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

I would like to make the submit button disable just after submitting

javascript

html

submit

addeventlistener