CODEWITHSUNDEEP
javascriptphpjquery
Arav
Arav

Reputation: 33

Prevent multiple form submission on multiple clicks in PHP or JavaScript

I want to prevent multiple form submission on multiple clicks.

I actually want to insert data into the DB. The process takes a little time, like 2-3 second.

The problem is, that within the 2-3 second the visitor can click about 6-7 times to that button, and it will run the script over and over again.

How can i prevent it?

I tried this code:

<!DOCTYPE html>
  <head>
    <title>My Form</title>
  </head>
  <body>
    <form action="process.php" method="post">
      <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
        <div>
      <label for="name">Name</label>
      <input type="text" name="name" />
      <div>
        <div>
          <input type="submit" value="Add Name" onclick="this.disabled=true;return true;" />
        </div>
      </form>
  </body>
</html>

Upvotes: 3

Views: 5920

Answers (5)

Mayank Patel
Mayank Patel

Reputation: 1571

You can disable the submit button when the form submit is in progress like this.So the button will be disabled till the form submit is finished.

first, give an id to your submit button.for example id="myButton"

<input type="submit" value="Submit" id="myButton" />

onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"

The form will be 

<form action="test.php" method="post"
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"
>

Upvotes: 2

Roberto Bisello
Roberto Bisello

Reputation: 1235

I suggest to use events to catch the form submission (user can submit event with enter on a field), then set a flag to prevent a re-submission and disable the fieldset in order to prevent any other submit

var submitted = false;
document.querySelector('#add-form').addEventListener('submit',function(evt) {
  if(submitted) {
    evt.preventDefault();
  } else {
    submitted = true;
    this.querySelector('fieldset').setAttribute('disabled','disabled');
  }
});
<!DOCTYPE html>
<html>
  <head>
    <title>My Form</title>
  </head>
<body>
<form action="process.php" method="post" id="add-form">
  <fieldset>
    <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
    <div>
       <label>Name <input type="text" name="name" /> </label>
    </div>
    <div>
      <input type="submit" value="Add Name" />
    </div>
  </fieldset>
</form>
</body>
</html>

P.s. I've fixed some mistype in html and added the fieldset to the form P.p.s. considering your code I think that you don't use jquery, so I've posted a vanilla js, but if you use jquery you can use the same script with some minor edit

Upvotes: 0

Arun jai
Arun jai

Reputation: 170

You can block the ui so that even if the user tries to click ui block will not allow and unblock the ui once it is successful .

http://jquery.malsup.com/block/

Upvotes: 0

Amit Wagner
Amit Wagner

Reputation: 3264

disable the button with javascript once clicked . if you use ajax to submit the form use a flag when the user submit and when you get the response change the flag. see code below

var processFlag = false
$('form').submit(function(e){
  e.preventDefault()
  if(processFlag === true){
    return;
  }
  processFlag = true
  $.ajax({
  //your settings
  })
  .done(function(){
    processFlag = false
  })
})

Upvotes: 0

ElChupacabra
ElChupacabra

Reputation: 1091

I think the easiest way would be to send form via ajax and turn off button until you get response.

var submitted = false;
$('#your_form').submit(function(e) {
    e.preventDefault();
    if (submitted) {
        return;
    }
    submitted = true;
    $.post('your_url', $(this).serialize(), function() {
        console.log('success');
        submitted = false;
    }, function() {
        console.log('error');
        submitted = false;
    });
});

It's just an example, you can of course expand it, show some popups, reload page after success or whatever.

I'd advice against disabling button for 2-3 seconds. Anything in programming should be done based on real action time, not hardcoded. You will avoid double click on form by disabling button for 2-3 seconds but it's still bad in scenarios: - response came in 0.2s and user should be able to resend form if there are errors - user has slow connection and response came after 5 seconds, he is still able to send another form while he shouldn't be

Upvotes: 0

Related Questions