Prevent multiple form submission on multiple clicks in PHP or JavaScript

Question

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>

Do what @Shree says, I already did that in a lot of projects and it works just fine. — teeyo
– teeyo, Commented Oct 23, 2017 at 8:16

Mayank Patel · Accepted Answer · 2017-10-23 08:58:23Z

2

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...';"
>

answered Oct 23, 2017 at 8:58

Mayank Patel

1,5811 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ElChupacabra · Accepted Answer · 2017-10-23 08:18:40Z

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

Amit Wagner · Accepted Answer · 2017-10-23 08:21:11Z

0

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
  })
})

answered Oct 23, 2017 at 8:21

Amit Wagner

3,1843 gold badges23 silver badges39 bronze badges

Comments

Arun jai · Accepted Answer · 2017-10-23 08:21:36Z

0

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/

answered Oct 23, 2017 at 8:21

Arun jai

1707 bronze badges

Comments

Roberto Bisello · Accepted Answer · 2017-10-23 08:43:21Z

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

Collectives™ on Stack Overflow

Prevent multiple form submission on multiple clicks in PHP or JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related