Question

I have a problem when I submit the form (pressing ENTER key or clicking mouse) – if I press it x times quickly, faster then actual view is recreated (e.g. ten times in one second), the form data are sent ten times and ten times are saved to database.

And no matter if there is some validation, e.g. check that data can be saved only once.

Next submit, after view refresh, works normally. Data are not saved, because the validator is working now..

So, malevolent user fill the form and instead of submit it normally, he is quickly clicking on submit button until the view is rebuilded and I have X records in database instead of one 🙂

How can I prevent this strange behaviour?

How to forbid to press submit button until view is rebuild?

Answer 1

SOLUTION:

//Initialize our submit flag to false
var formSubmitted = false;

/**
 * Prevent from submitting a form more than once
 * @returns {Boolean}
 */
function submitForm()
{   
  //has the form been submitted before?
  if( formSubmitted == true )
  {
     alert("This form has already been submitted!");
     return false;
  }
  formSubmitted = true;

  return true; // Submit form
}

and the submit button:

<h:commandButton ... action="#{bean.action}" onclick="return submitForm();"/>