Chapter 6
HTML Forms, Data, and Ajax
WHAT’S IN THIS CHAPTER?
- jQuery Data Appreciation
- Validating Forms With jQuery
- Using jQuery’s Ajax Methods
The three main topics of this chapter are closely related cousins. HTML forms contain and process data, an everyday operation of the Web. More often than not, form data is processed and posted to a server somewhere asynchronously, rather than the old-fashioned post-process-reload technique. Here, you explore one of the biggest revolutions in web development of the past 10 years — Ajax. You also learn how insanely easy jQuery makes it, simplifying asynchronous communication with the server side.
JQUERY DATA APPRECIATION
An often misused feature of tag elements is using attributes such as alt or class to attach useful data to an element. For example:
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.6.1.js”></script>
<script type=”text/javascript”>
$(function(){
$( “#randomEl” ).attr( “alt” , “1999” );
});
</script>
</head>
<body>
<img src=”usefulImage.jpg” id=”randomEl”></div>
</body>
</html>
Just for the record, we’re aware of the fact that we can assign “1999” directly to the alt attribute, but just suppose you needed to add the string programmatically. There’s a semantic problem with this because the attribute used to store the data isn’t meaningfully associated. Is 1999 a year, a random integer, or what? A better approach is to use jQuery’s .data() method, which stores arbitrary data for an element with a ...
