preventing duplicate data using JQuery

Question

I have a moronic customer that does not seem to understand the English text in an alert that instructs him that his data was saved successfully. He continually presses the submit button and inserts a new row of data into the database. Can anyone suggest a solution to prevent this please? I am using jQuery to submit the data so there is no refresh. Thanks.

Answer 1

Generate a unique token on the page from which the insert is occurring in a hidden field that will be posted when the form is submitted. Store this token in the database somewhere. When a post containing that token is processed, mark that token has having been consumed if it hasn't already been marked. If a post with a token that has already been consumed is seen, refuse to process it and present the user with an error (or redirect to an edit/update page so they can make changes).

EDIT: based on comments

If you need multiple inserts from the same page, then presumably you have some input fields that contain the new data. When you go to submit the data, put up a modal dialog that says "please wait while I update your data". This will prevent the user from doing any actions while the update is happening. When the update returns successfully clear the input fields and dismiss the dialog. If the request takes too long, dismiss the dialog, show an error, and leave the data in the fields for re-submission.

Answer 2

You can disable the submit button or image until the request returns a result.

Answer 3

You could put that data on screen, use a yellow fade effect to highlight it on screen in a list view. As the new data is inserted to the top of a table or list element, highlight it temporarily, use jquery's new live methods to add in the ability to remove the row through AJAX.

Also since you just got the data you don't have to wait to add it to the screen just make sure you check the database gives a successful result back so you can remove it or use a placeholder till the database returns success full then add the data into it on success.

Answer 4

Wordpress has a great animation when you delete a post via AJAX. Maybe you could do something similiar, except add the new row on screen (use JSON to get the data back) and fade it in, green first to help show the end user it is green.

As for not resetting the form values, you could do something like this in jQuery

$('#myForm input[type=text]').val('');

Good luck Frank!

EDIT I think if you return the results via AJAX, and then update something on the screen, the end user will be less likely to think his input hasn't been entered into the db.

You can get a cool ajax loader from www.ajaxload.info, and display this whilst the AJAX (I'm assuming when you say the user doesn't leave the page, that is what you're referring to) is processing.