CODEWITHSUNDEEP
phpjavascriptjqueryhtmlforms
Jack Copeland
Jack Copeland

Reputation: 5

How do I prevent multiple form submissions with the enter key?

I've built a trivia game using PHP and javascript. Since each question has a time limit, I've not provided a submit button; instead, the user can directly submit the answer by pressing the Enter key. After the enter key is pressed, the user is redirected to another URL which checks if the posted answer is correct, adds 10 points if the answer is correct and then updates the database with the user's points and then redirects the user to the trivia page where they have another question to answer. However, when a user enters the right answer and presses the enter key multiple times without letting the page reload, their answer is deemed as valid by the script and their points are added as any times as the answer was submitted. So, if I hit the enter key 40 times after typing in the right answer, it adds 400 points. I've tried preventing this by using:

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

But that doesn't seem to work. How do I disabled the submit action after the data is submitted once until the page is reloaded?

Any solutions using Javascript, Jquery or PHP are welcome.

Upvotes: 0

Views: 2697

Answers (4)

FrancisMarfo
FrancisMarfo

Reputation: 143


Try this Code

$('#form1').submit(function(e) {
    $('#send').attr("disabled", "disabled"); // Where #send is the id of ur submit button//
});

Upvotes: 2

Manish Jangir
Manish Jangir

Reputation: 505

include Jquery BlockUI plugin. http://www.malsup.com/jquery/block/ and include the following code in your page.

$("input").keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    $("form").submit();
    $.blockUI;
  }
});

When the user hits enter when a plugin will block the UI and user will not be able to hit enter again untill the page reloads.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

var isSubmitted = false;
$("form").submit(function() {
   if(!isSubmitted){
     isSubmitted = true;
   }else{
     return false;
   }
});

Upvotes: 3

Devesh
Devesh

Reputation: 4550

One of the solution you have to add to store the submit the information in the database , like for each user bofore adding the value +10 you should check if you have already added the value. The reason i suggest , because any other client side option may fail in one or other case.

Upvotes: 2

Related Questions