This is a fairly simple project. It consists of one form. The only inputs on the form are 1 textbox and 1 submit button.
When the user comes to the page, they will see a textbox in which they need to enter their personal ID (a string of 8-10 characters). The submit button below it does not say "Submit" at first. Instead, when the user comes to the page, the submit button can't be clicked and it is counting down every second from "10" until "0" is reached. After "0" is reached, the submit button should become clickable and say "Submit". At this point, the user can click the Submit button whenever they choose to.
When the user clicks the Submit button, the page should NOT refresh. Instead, your AJAX script should compare the value of the string in the textbox to a MySQL table to find a matching entry in the "their_string" field (SQL dump of the table is attached). The Submit button should become unclickable at this point to prevent the user from clicking the Submit button more than once.
Also, a server-side check with PHP should be performed to verify that at least 10 seconds have passed from the time the user arrived on the screen to when they submitted the form.
If the string from the textbox does NOT match an entry in the table, and if the user has not submitted an entry within the last 6 hours, the script should create a new record in the table. Then, it should print this message below the Submit button: "Your information has been added." (or something like that).
If the string from the textbox DOES match an entry in the table, the script should print this message below the Submit button: "Your identifier was not added because it has already been entered."
If the user refreshes the page at any time, even after the database check is made, the entire process should start over again with the Submit button not being clickable and counting down to 0 from 10.
I will supply you with the basic form, PHP, and the MySQL table. You will need to adjust the PHP and create the AJAX portion of the code. I wrote the PHP as if the form would be submitted through POST to give you an example of that I'm looking for, but instead of entire form posting and refreshing, AJAX should be used.
This needs to function correctly on Internet Explorer 7, 8, and 9, on Firefox, and on Chrome. Please comment your code to a reasonable degree.