Basic jQuery
I have been working on a web project at work for the past month and used it as an opportunity to learn jQuery and CouchDB.
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.
While learning it, I found that there wasn’t a simple tutorial on how to make an ajax form, so here is one:
First, download jQuery from their website and rename the file to “jquery.js” (minus quotes).
Let’s create a file called form.html in the same folder as jquery.js:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Contact Form</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contact").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "process_form.php",
data: $(this).serialize(),
success: function(html) {
$("#info").html(html);
},
error: function() {
alert("[ERROR] submit");
}
});
});
});
</script>
</head>
<body>
<form id="contact" action="process_form.php" method="POST">
Name <input type="text" name="name" /><br /><br />
Email <input type="text" name="email" /><br />
Message <textarea name="msg"></textarea><br /><br />
<input type="submit" name="submit" value="submit" />
</form>
<p id="info"></p>
</body>
</html>
Next, lets have a file called process_form.php, again in the same folder:
<?php echo "Name: ".$_POST['name']."<br />"; echo "Email: ".$_POST['email']."<br />"; echo "Message: ".$_POST['msg']; ?>
If you load up your pages via a working installation of a webserver with PHP installed, it should return what you entered into the form upon clicking submit. Now that it works, how about an explanation?
This is selecting the element with the id contact and binding to it’s submit event the proceeding function which is being passed event.data by jQuery
$("#contact").submit(function(event) {
Because event was passed to the function, we are now preventing the normal submit actions from being performed. So now when you click the submit button, the page wont refresh and the browser wont call the action script specified in the form tag.
event.preventDefault();
This is how jQuery loads a page using HTTP request. We specify that we want it use POST and the url to request.
$.ajax({
type: "POST",
url: "process_form.php",
This is how we can send the data collected from the form to file being requested. $(this) is referring to the element with an id of contact and serialize is going to do just that: serialize the collected data into a string that can be sent in the request.
data: $(this).serialize(),
This is the function to be called if the request succeeds. In our case, we are going to have it print all returned html into the element with id of info.
success: function(html) {
$("#info").html(html);
},
This is called if the request fails for some reason. In our case, an alert will pop up.
error: function() {
alert("[ERROR] submit");
}
});
});
That concludes this tutorial, if you want to read more about jQuery, there are tons of docs on their official website.
