How to prevent double submission after page refresh - javascript

I have a 'contact us' html form and I'm giving gift for each member that click submit.
I want to make sure that a user doesn't submit twice (with different name and email).
I can disable the button after click, but what will be the best solution to prevent submit after page refresh?
Thanks

Is to directly redirect from your POST to a GET request or page. if he/she refreshed it will refresh the other page. this is named Redirect After Post and you can read more about it here and in WikiPedia
An Example can be found here.

Two things that you can do and you should do.
First disable the Submit button as soon as your client submits the form
with valid information in it. So that he/she accidently doesn't send
duplicate information in the form.
Second, which is more important. Is before you save this information in
your database whatever that is MySQL, MongoDB or etc. You perform a query
that checks whether the information provided by the user exists in your db
already or not. If not then proceed as you do but if it does you can do
error handling on the use case scenario as per your business logic.

<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
See https://stackoverflow.com/a/45656609/1066234

Related

Disabling page back and refresh functionality

The scoring software I am working on should submit and store date in a DB. However re- submitting an action is not allowed in this sport. So I want to disable the page back functionality to avoid re-submitting the same (or revised) data. Any php or javascript solution is welcome. I do realize the opinions posted that the page back function should not be disabled principally but in this case it would be very helpful however.
Use $_SESSION to avoid re-submitting: Set a session variable on submit and if it's set don't process a second submit.
However the user could remove browser cookies and re-submit. If your casuistic needs to prevent it too, store the submitting ip in the database.
PS: About refresh, use Post/Redirect/Get: https://en.wikipedia.org/wiki/Post/Redirect/Get

Design pattern to add a record

I will be adding a record with very little user required information, and from a UX prospective, don't wish to direct the user to a blank "edit" page.
Instead, the user will click something, and a dialog requesting the minimum information will be presented, and upon a successful submission, the record will be displayed allowing them to use inline editing should they wish to modify.
What is the recommended design pattern to add the record? For instance:
Option
Present the dialog, user fills in the data and clicks "submit", the data is client side validated, and:
Use JavaScript to submit the form.
Server validates and either internally redirects to the page displaying the newly added record, or redisplays the previous page displaying the errors.
Option 2
Present the dialog, user fills in the data and clicks "submit", the data is client side validated, and:
Send data to the server via ajax post request.
Server validates and either responds with errors or the PK of the added record.
If successful, use JavaScript to redirect to the page with the PK to display the newly added record, else display the errors.
Option 3. ???
Please provide reasons why one patter is better than another.
My suggestion is to use a slightly modified version of option 2.
Once the validation in the server is successful, the record is inserted and the client gets the primary key of the newly created record, with javascript close the dialog (or modal) and add the relevant information of that record in the main page, this will let you avoid redirecting to another page.
Cheers

Preventing Duplicate Form Submissions Without JS

I am working on a project and i am building it using the mvc pattern. On successful form submission i redirect user and display a flash message ( success message using session ) i have no issues with users using the back button or refreshing. But if a user encounters an error when submitting a form the form is not redirected so the error can be displayed while keeping old form data to populate the field so users do not have to re-enter information.
The issue i am having is when users will spam the button for any reason. If i double click or spam the button an error is produced ( invalid form token error ) but the db interaction still takes place and inserts the form data. I am trying to find the best js alternative to maintain cross browser compatibility. Is js the way to go? Is their a php alternative?
As you are using session vars, why not set a variable just after your DB update takes place. Then before every DB update check for this value. If false then update DB.
function updateDB(){
if($_SESSION['already_submitted'] == true) return false;
// DB update code
// on success
$_SESSION['already_submitted'] = true
// rest of code
}

Javascript OnPageUnload - on "leave page" must call additional method

This is the problem: my web application (php) has a wizard feature which gathers customer's data page by page, and stores it in session. If customer tries to navigate away from the page before they have completed the wizard, I would like to display a massage to the effect of "You will lose your data". If the customer chooses to navigate away, the session data should be wiped.
I know that I can intercept this action by binding onpageunload event, but is there a way to then make another call, e.g. ajaxClearWizard() if the customer says "yes"?
PS I can see that, perhaps session shouldn't be used here, but I'm using an existing library, and although this wizard-data-persistence used to be a required feature the business now requires it to be removed :(
Any ideas, alternatives?
Thanks in advance!
window.onbeforeunload = function () {
return 'Your content has not been properly saved yet!';
};
This will make the browser display a confirmation box in middle with above content.

php form refresh send form again (prevent)

when a form is filled and send, if you refresh the page, its says that the form will send again. (submit the form again).
What is a good way to prevent this from happening? or kill this session?
any guidance in this?
thank you
After processing the POST informations, do a
header('Location: your_url');
exit();
You can use AJAX to send POST variables to server, so refreshing browser window problem will not be a problem.
If you keep displaying the form there is no reason to prevent this.
Otherwise - i.e. after the form has been submitted successfully - store any messages you need to display in your session and then redirect to whatever page you want to display. This ensures the user is moved away from the POSTed page.

Categories

Resources