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

Question

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>

Maybe this will help: https://stackoverflow.com/a/17106916 – rojadesign Nov 23 '20 at 11:10 — rojadesign, Nov 23 '20 at 11:10

score 1 · Answer 1 · answered Nov 23 '20 at 11:07

1

The submit can be disabled using the setAttribute() method by assigning the appropriate disabled attribute. In your case, it will be like this:

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

answered Nov 23 '20 at 11:07

s.kuznetsov

14,870
3
10
25

Thank you Sergey for your answer! Now I understand why it didn't work. But my wish is to post the data first and then make the button disable. If the page isn't reloaded, the data will not be sent. – agongji Nov 23 '20 at 11:48
To do this, you need to remove the `evt.preventDefault()` line. And your button will work as expected. I was glad to help – s.kuznetsov Nov 23 '20 at 11:51

score 1 · Accepted Answer · answered Nov 23 '20 at 11:08

1

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>

answered Nov 23 '20 at 11:08

Harshana

5,151
1
17
27

Thank you very much for your answer! Now I understand why it didn't work. But my wish is to post the data first and then make the button disable. If the page isn't reloaded, the data will not be sent, will it? Should I use xmlHttpRequest or this kind? – agongji Nov 23 '20 at 11:46
1

Yes. For this kind of work, you can use xmlHttpRequest. – Harshana Nov 23 '20 at 11:47
1

Please consider approving the answer if it helped :) – Harshana Nov 23 '20 at 11:48

score 0 · Answer 3 · answered Nov 23 '20 at 11:09

0

The JavaScript side works it's something about the form... when the page is refreshed it throws an error. Add evt.preventDefault(); inside the event listener function to stop the page from refreshing. The button is disabled.

answered Nov 23 '20 at 11:09

Gabriel Lupu

1,397
1
13
29

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

3 Answers3