Trying to check time submission using vanilla javascript

[andresb]

Hi.

I am trying to get a form reset if submitted in less than four seconds using plain javascript.

I have this Jquery script, which seems to work:

$("form#the-form").submit(function(){
    setTimeout(function(){this.reset()}, 4000);
});

Is it possible to do it without jQuery?

Best regards and thanks.

[James_Hibbard]

Hi,

@andresb

I am trying to get a form reset if submitted in less than four seconds

Is this to counteract spam, i.e. bots that fill out a form far quicker than a human visitor could?

I don’t really think that is what the code you posted is doing (unless you missed something out).

Given this HTML:

<form id="the-form">
  <input type="text">
  <button>Submit</button>
</form>

Unless you prevent the browser’s default submit action, when you click the Submit button, the form will be submitted, the page will be refreshed and none of your code will be run.

$("form#the-form").submit(function(){
  // This won't run
});

You can test this by adding a call to preventDefault():

$("form#the-form").submit(function(e){
  e.preventDefault();
  setTimeout(function(){this.reset()}, 4000);
});

Now, when you submit the form, you see the following error message in the console after 4 seconds:

Uncaught TypeError: this.reset is not a function

This is because the this in the setTimeout call refers to the global window object (which doesn’t have a submit function).

As I said, maybe you simplified the code to post it here and a piece of the puzzle is missing.

But to answer your original question, the code you posted in plain JS is:

const form = document.querySelector('#the-form');
form.addEventListener('submit', function() {
  setTimeout(function(){this.reset()}, 4000);
});

Also:

@andresb

Is it possible to do it without jQuery?

jQuery is just JavaScript. Everything you can do with jQuery, you can also do with plain JavaScript.