Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

eleven0's avatar

Multiple Clicking on Submit Button

My app utilizes forms all over with submit buttons. Input data goes through validation in my controllers...

But I just realized that if I am quick enough, I am able to click on the submit button 4-5 times before the first submit's return message returns.

This is an issue because people might click on submit button without realizing that the first one is still loading.

On a database level, it seems auto incrementing works but Since I had some cells which I increment manually through my controllers, since initial first increment is not finished before the others come, it messes up the increments and cell gets only incremented once instead of 4-5 times....

There is also issue form data being persisted 4-5 times.... This can't be normal...

Is there a way to solve this application wide or do I have take precaution for each form/submit I have?

Thanks.

0 likes
7 replies
Tray2's avatar

I guess you are using JavaScript and Ajax to send the request.

Then you can disable the button after the first pressing so it can't be submitted more than once.

document.getElementById("idOfButton").onclick = function() {
    //disable
    this.disabled = true;

    //do some validation stuff
}
Sergiu17's avatar

If you use JavaScript, is very easy.

<button
    type='submit'
    @click='submitForm' 
    :disabled='disabled'
>
    Submit
</button>
new Vue({
    el: 'main',
  data: {
    disabled: false
  },
  
  methods: {
    submitForm: function() {
        this.disabled = true;
      
      document.querySelector('form').submit();
    }
  }
})
deansatch's avatar

Only js disabling the button can totally prevent a second submit. But to avoid unnecessary dB inserts you can pass a unique token (maybe even use the csrf token) on submit. Store it in the session for that visitor in an if statement. Sorry I am on my phone and can’t find the back tick key to do a code sample but something like

If isset( $_SESSION[‘thecsrftoken’]) Redirect back Else set the above session and continue

Cronix's avatar

It doesn't have anything to do with ajax, or the type of request it is (get/post/etc). It has to do with disabling the submit button after it's clicked so you can't click it and resubmit the data again.

That's the best (and really easiest) solution, because then the request is not even hitting your server. Remember, each and every request to the server boots laravel up from scratch, consuming memory and resources and taking time. It's better to block them from even being able to submit it, rather than have the server have to boot itself up, check if they've submitted previously, and ignore it if it has.

eleven0's avatar

Thanks all for your inputs, I will go through my code.

@SERGIU17 Can you help me further? I barely use any JS so I have very limited knowledge.

I implemented what you posted... I can see from my chrome dev tools that it adds "disabled:disabled" to the submit when clicked. But the issue is now is that it also prevents any POST request to the server. Button is completely.

Please or to participate in this conversation.