Assignment #10: jQuery Events and Effects

In this assignment you will make an anti-multi-click system for a submit button, using jQuery.

• Some Web users do not understand that a submit button should be clicked only once, and that they (the user) should wait for the Web page's response to their click. At a company that I once worked at, we witnessed users clicking a form's submit button as fast as they could repeatedly push the mouse button. This kind of clicking can clog up a Web server's memory and really slow things down.
  
  
• You will use some jQuery code in a click event for the submit button, which either:
  • hides the submit button behind some text that says something like "Loading..." or "Please wait..."; or
  • hides the submit button behind an image; or
  • disables the submit button (Which we haven't talked about yet! If you can successfully disable the button with jQuery, I will give you extra credit.)
  when the button is clicked.

The main requirement of the assignment is to keep me (or you) from clicking the submit button more than once.

Now here are some specific instructions for this assignment:

• Make an HTML page with a simple form, including a submit button. You can put as few or as many form elements in your form as you wish.
  
  
• In the action attribute of your form tag, use this value:

  http://www.jimlink.net/PHPStuff/TestFormDataDelay.php

  which will provide a long enough delay for you and me to see if your "hiding" code is working.
  
  Interestingly, you may have problems with this action page in Internet Explorer. IE wants to completely blank out the browser display while it is waiting for the response from this action page. You probably should test your assignment in Chrome or Firefox.
  
  
• Because the school server sometimes prevents the use of method="post" in your <form> tag, you might have to use method="get" for this assignment. Start with method="post" but feel free to change it to method="get", especially if you get any server errors.
  
  
• The onsubmit attribute/event handler is in the form tag.
  
  
• Use jQuery selectors and jQuery functions to accomplish the hiding of the submit button when the user clicks it. You can display an element over (in front of) the submit button, or you can make the button's visibility property to be "hidden", or make its display property to be "none", or any other approach that you can think of; as long as the user can click the button only once.
  
  
• Add a hypertext link to the index.html file that is in your class folder. Make this hypertext link display the html page that you made for this assignment.
  
  
• Validate your page using the W3C HTML Validator. (The Validator will automatically detect whether you have an XHTML or an HTML5 document.)
  
  
• Upload your files to your class folder. You will need to use an FTP program to upload the files. You will find some general FTP instructions on a page called "FTP Instructions".
  
  
• Test your page to make sure it has no errors in it. (You should turn on the display of script errors in your browser!) Here are some instructions on how to turn on JavaScript error messages.
  
  
• Checklist:
  1. Does your page display a form with a submit button?
  2. When the user clicks the submit button, does a message that says "Loading..." or "Please wait..." or something like that (such as a div with a background color in it, being positioned over the button), hide the submit button so the user can't click it again?
  3. Did you use jQuery selectors and functions to accomplish this task?
  4. Does your form load page http://www.jimlink.net/PHPStuff/TestFormDataDelay.php ?