I would like to make the SUBMIT-BUTTON disable just after submitting. Here is what I wrote and it doesn’t work. Could you please give me a clue what the problem is?
<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>
Advertisement
Answer
When you click the submit
button, the page reloads. That is why you don’t see the disabled
attribute in action. You can add evt.preventDefault();
in the event Handler to prevent the reloading
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>