Delay Button Submit Javascript

Question

I'm trying to add adelay on my submit button in javascript. But it just seems to freeze and no longer commits any action after clicking on it. Does anyone have an explanation ?

function Progress() {
   var button = document.getElementById("Button");
   var form = document.getElementById("new_video")

    form.onsubmit = function() {
      return false;
    }
    button.onclick = function() {
     setTimeout(function() {
        form.submit();
     }, 2000);
       return false;
    }
  }

<input type="submit" name="commit" value="Upload" class="btn btn btn-primary" onclick="Progress()" id="Button" data-disable-with="Upload" disabled="">

<input .... disabled=""> How do you click on a disabled button? Is that property removed? — epascarello
– epascarello, Commented Jul 7, 2020 at 21:15
why are you using type=submit instead of type=button if you don't want it to submit the form? i see code in here to submit the form but then a return false when it does and i'm a little confused — Nikki9696
– Nikki9696, Commented Jul 7, 2020 at 21:17
If you don't need to maintain Enter key support, I suggest switching to type="button". It solves your problem nicely — Trevor
– Trevor, Commented Jul 7, 2020 at 21:30

Roko C. Buljan · Accepted Answer · 2020-07-07 21:27:34Z

4

// Cache your Form Elements
const EL_form = document.querySelector("#myForm");
const EL_formSubmitBtn = EL_form.querySelector("#Button");

const Progress = (evt) => {
  evt.preventDefault(); // Prevent Browser Submit action
  
  EL_formSubmitBtn.disabled = true; // Disable the submit button
  
  setTimeout(function() {
    EL_form.submit(); // Or do AJAX stuff here
    EL_formSubmitBtn.disabled = false; // Enable the submit button
  }, 2000);
};


// Use Element.addEventListener instead of inline JS
// Don't attach handlers to button, rather use the Form "submit" Event:
EL_form.addEventListener("submit", Progress);

<form id="myForm" action="demo.php">
  <input id="Button" type="submit" value="Upload" class="btn btn btn-primary">
</form>

PS: Don't capitalise names of regular functions that do not actually return an Object - or are not a Class by definition, use rather progress as your function name. Or rather be more descriptive, it's actually a formSubmitHandler

edited Jul 7, 2020 at 21:27

answered Jul 7, 2020 at 21:20

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trevor Over a year ago

I like this answer because it stops the user from spamming the enter key or double clicking submit while they impatiently wait for the ajax call.

Roko C. Buljan Over a year ago

Thanks for the valuable feedback @Trevor

Daniele Ricci · Accepted Answer · 2020-07-07 21:29:00Z

2

You could try this:

var button = document.getElementById("Button");
var form = document.getElementById("new_video");

button.onclick = function(event) {
  event.preventDefault();
  setTimeout(form.submit, 2000);
}

and

<input type="submit" name="commit" value="Upload" class="btn btn btn-primary" id="Button" data-disable-with="Upload">

Hope this helps.

edited Jul 7, 2020 at 21:29

answered Jul 7, 2020 at 21:19

Daniele Ricci

15.9k1 gold badge32 silver badges62 bronze badges

4 Comments

Trevor Over a year ago

might want to change to a regular function in the setTimeout

Daniele Ricci Over a year ago

Why @Trevor? Does arrow function have some drawback?

Trevor Over a year ago

You restricted yourself to es6 browsers only. In 2020 it should be safe, but if you are targeting es6, you should use const. not var. You can also do this setTimeout(form.submit, 2000); but that's confusing for beginners

Daniele Ricci Over a year ago

You are too forward @Trevor ! Thank you for useful clarifications!

Collectives™ on Stack Overflow

Delay Button Submit Javascript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related