Preventing multiple submits

Disable the button when it is clicked. (Just read your question properly and you stated that you didn't want that - oops.)

@mstnorris Thanks, but that does not work if they have JS turned off.

Who doesn't have JavaScript these days?? ;)

In all seriousness, so many sites wouldn't exist if JavaScript was turned off, is it that necessary that you cater to those few? Just a thought.

Anyway, back to your question; I guess you will have to set some kind of token when you load the page and check for that, when you submit it, change the token and prevent it from being submitted again.

We force JS support by putting a hidden form element on the page and then checking that on any request that returns a form.

<input type="hidden" name="_jsEnabled" value="{{ false }}" />

Then put some JS in there

$( document).ready(function(){
    $( "input[name='_jsEnabled']").val( {{ true }} );
});

Then check that input is true before you allow a user to get to the desired form. It will only be true if JS in enabled.

Putting the above code in a master page will send it with every request, you can then check on every request with middleware, custom request, or on a case by case basis in your controller or specific routable method. We do it in middleware so we can do this on every page load easily.

The common way of doing this is to redirect to another page when you have stored / updated your content. This way when you refresh the page the redirect request is fired again.

Laravel style is : you never render some view in a controller action which store or update content, you just redirect to some other page.

You can do it via timestamps, if X user has posted in the last X seconds, don't save/redirect back with error. Possible to do on authorise part of a form request, controller or middleware I guess

@pmall and @bashy both good points.

I just realized my previous post doesnt solve this problem at all :D

I do it with simple JavaScript. I add a custom attribute to my HTML, like data-single-click, and then, behind the scenes, any buttons that have that attribute will immediately be disabled after the first click.

JS is a good way but should also be done server side if you don't want people to bypass it. If it's not important I'd say JS, otherwise use a PHP method.

mstnorris said Who doesn't have JavaScript these days?? ;)
There are State agencies that doesn't use javascript in many of their secure forms. Unless you are custom programming an intranet application, you should not have to depend on javascript.

@jlrdw my post was tongue in cheek

i have same problem :'(

Another solution, even though Jeffries is real good it's to have a popup saying please wait. Normally this is only encountered on a day or a time when a server is going slow and a user may think the page wasn't submitted. But there's no doubt a lot of people have this problem. Usually if this is for a database update it's only going to work once anyway.

@JeffreyWay what do you do for server side validation?

There is another weakness when using click button. They can submit the form using "ENTER" KEYS and this issue will come back again. I think it's a little bit too late, but I guarantee this method will work as you wanted.

DISCLAIMER!!!

THIS METHOD WILL WORK IF YOUR INPUTS IS SURROUNDED INSIDE ELEMENT "FORM".

First, you can add attribute onsubmit="disabledSubmitButton(this)" in your tag form.

Second, copy this method in your script JS

function disabledSubmitButton(form) {
	const submitButtonElts = form.querySelectorAll("button[type='submit']");
	submitButtonElts.forEach(btn => btn.setAttribute("disabled", ""));
}

This method above will disable all buttons submit inside the form you want to submit.