How to detect if form submit event happened before?

https://jsfiddle.net/mye2pzgf/

I have something like this but not wanna work.

Prevent to submit if true if happen submit before?

Any idea?

Thanks!

There is no result property on that event object.

What exactly is the requirement here, what are you trying to prevent? If you are trying to make it so the same user can not submit the form more than one time it will require a lot more.

What if the page refreshes? If you save something locally on the user system (localStorage, cookies) what if it is cleared? You pretty much have to have a database with something that identifies the user you can check against.

1 Like

I got that then maybe just good to disable button to send again the form.

Well that depends on how you do the form submit and if it refreshes the page or not. But yes if the page does not refresh you can disable the submit button.

And you think the disabled button prevent the spam bots? To submit multiple times? Or any idea for this?

Thanks!

No I doubt it. For spam protection you likely need to use something like reCAPTCHA or some other protection.

You can try the Honeypot Method when you add a hidden input and check if it is filled out. If it is filled it’s not likely to be a person as they do not see the hidden input and you can stop the submit. Not sure how effective it is.

Hmm! Yes I heard about google reCAPTCHA just is so ugly just on a simple form. I know can hide to right side but that also not so good looking. You think spam bots detect that? So they work reload every time and submit button?

Thanks!

Sorry, I don’t understand the question. Detect what?

Like I think a spam but works load the page and try submit button as many as possible. But that detect the bot if submit button disabled and then reload the page and send that way. So again reload and send reload and send?

Thanks!

I’m really still not sure what you are asking, sorry. Are you asking if the bot will just keep refreshing the page and submitting again? If so I don’t think so, but I don’t really know much about spam bots and how they work.

Anyway, this is a quick example of what I mean with the Honeypot Method

<form action="" id="form">
  <input type="text" id="not-for-humans">
  <label> Name
    <input type="text" name="name" id="name">
  </label>
  <label for="email"> Email
    <input type="email" name="email" id="email">
  </label>
  <button>Send</button>
</form>
#not-for-humans {
  visibility: hidden;
  position: absolute;
}
$("#form").submit(function(e) {
  if ($("#not-for-humans")[0].value) {
    console.log("not human");
    e.preventDefault();
    return;
  }
  console.log("human");
  e.preventDefault();
});
2 Likes

You can make use of HTML 5 localStorage to store a value if the form is submitted for the first time. And if the user tries to submit again, check if the value is true and prevent it from submitting.
Code Sample:

    <form id="myForm">
      <input type="text" name="comment">
      <button type="submit> Submit</button>
    </form>

// Using jQuery

<script>
   $("#myForm").submit(function (e){
      if(localStorage.submitted == undefined){
//This means the value has not been set
     e.preventDefault(); // prevent the form from submitting
        alert('You've already submitted this form');
}else{
       localStorage.submitted = true; //set submitted value to true
     $("#myForm").submit(); // dynamically submit the form
}
})
</script>
I hope this helps 🎉```
1 Like

Oh my good! Thank you so much. :slight_smile:

Thanks you too is very useful!

https://jsfiddle.net/xjsu17bm/

Please can you take a loot at this? By default write already submited :)? Is depends on text not?

Thanks!

You should use the getItem and setItem methods on localStorage. Pretty sure it is the $("#myForm").submit() that is causing the issue.

$("#myForm").submit(function(e) {
  if (localStorage.getItem('submitted') !== null) {
    e.preventDefault();
    alert('You ve already submitted this form');
    return;
  } else {
    localStorage.setItem('submitted', true);
    e.preventDefault();
  }
})

Also, remember to clear the localStorage when testing. Which brings me back to my original point, the user can just clear localStorage to bypass this check.

2 Likes