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

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>

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>