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

Question

我想在提交后立即禁用“提交按钮”。这是我写的，但它不起作用。你能告诉我问题是什么吗？

<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

当您单击该submit按钮时，页面将重新加载。这就是为什么您看不到该disabled属性正在运行的原因。evt.preventDefault();您可以在事件Handler中添加以防止重新加载let manual_form = document.getElementById('manual_form');let manual_button = document.getElementById('button');manual_form.addEventListener('submit', (evt) => {&nbsp; evt.preventDefault();&nbsp; console.log('submitted!');&nbsp; manual_button.disabled = true;}, false);<div>&nbsp; <form id="manual_form" action="" method="POST">&nbsp; &nbsp; <button id="button" type="submit" name="manual_start">SUBMIT！</button>&nbsp; </form></div><hr>

Answer 2

submit可以使用该setAttribute()方法通过分配适当的属性来禁用它们disabled。在你的情况下，它将是这样的：...manual_button.setAttribute('disabled', 'disabled');...let manual_form = document.getElementById('manual_form');&nbsp; &nbsp; let manual_button = document.getElementById('button');&nbsp; &nbsp; manual_form.addEventListener('submit', (evt) => {&nbsp; &nbsp; &nbsp; &nbsp; evt.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; console.log('submitted!');&nbsp; &nbsp; &nbsp; &nbsp; manual_button.setAttribute('disabled', 'disabled');&nbsp; &nbsp; }, false);<div>&nbsp; &nbsp; <form id="manual_form" action="" method="POST">&nbsp; &nbsp; &nbsp; &nbsp; <button id="button" type="submit" name="manual_start">SUBMIT！</button>&nbsp; &nbsp; </form></div><hr>

Answer 3

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