sholsinger.com

The object of this tutorial is to introduce methods that can be used in just about any situation to provide gracefully degrading form post functionality that works with or without javascript. The form will be a lot nicer with javascript because it can do so without a complete page request and response. This is important to you and me because while we want fancy asynchronous data transfer on the web, we also don't want to alienate people who browse without Javascript or use a dinosaur browser which can't handle it. Asynchronous data requests and responses are much quicker because you can send and receive much less data than a full page response. This speeds almost everything up considerably.

The Form</h3> The form is an integral part of this process as it provides the framework for the data that is to be sent to the script that processes it. The example I will be using today is a newsletter sign up form. The form code we'll be using for the example is below.

  

    Name:</label>
    
    

    Email:</label>
    
    

    
    
  </div>
</form></code></pre>


Notice that in the form there is two regular text inputs, a hidden input and a submit button. Pay attention to the hidden input because it is integral to the graceful degradation used in this example.

In addition to the form we are going to need a container in which we can display any AJAX response messages. So I will add the following after the form:

</div></code></pre>


The jQuery Goodness</h3>
Using jQuery we can override the default browser handling of the submit button. The following code should be placed at the end of the HTML file containing the form. Place it just before the closing body tag as shown in the sample below.


  

comments powered by Disqus