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

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

通过分配适当的disabled属性，可以使用setAttribute()方法禁用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(); 在事件侦听器函数中阻止页面刷新。 该按钮被禁用。