Simple AJAX with JQuery

Code:
<script type="text/javascript" src="jquery.js"></script>
That was easy enough!


By the way, during development and testing you can link to the most up to date version of jQuery via the following link:
http://code.jquery.com/jquery-latest.js

The form
This is normal HTML. My example is a simple newsletter subscription form.

Code:
<form action="" method="post">
<p>
<label for="name">Name:</label><br />
<input type="text" name="username" id="name" size="25" />
</p>
<p>
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" size="25" />
</p>
<p>
<input type="button" name="submit" id="submit" value="Subscribe" onclick="register()"/>
</p>

</form>
Note that the button with which we submit the form is not a submit button. Instead, we use a normal button with an onclick value of register() (This will come clear once we get on to the manipulation part.)

The Response Div
Normally, once a script has completed we echo out a message telling the user that the data was inserted into the database successfully (or words to that effect). We can do this with AJAX too. Therefore, we add a response div in which we will echo out our message:

Code:
<div id="response">
<!-- Our message will be echoed out here -->
</div>
Manipulation
Now we can start to manipulate the framework to do what we want it to. I will give the complete code first and then will break it down bit by bit:

Code:
<script type="text/javascript">

function register(){
$.ajax({
type: "POST",
url: "submit_data.php",
data: "username=" + document.getElementById("username").value +
"&email=" + document.getElementById("email").value,
success: function(html){
$("#response").html(html);
}
});

}

</script>
On a first glance this may seem a little daunting, but if we really concentrate its not that hard!

Code:
function register(){
Remember that register() value we set to onclick in the html form? Well this is the function that it is referring to. It basically means that when the button is pressed, this function will be executed.

Code:
$.ajax({
This basically sets up our AJAX function

Code:
type: "POST",
Normally when a form is submitted, its method is either POST or GET. This line tells the browser that we want to use the method POST.

Code:
url: "submit_data.php",
This is the file we want to be executed when the button is pressed.

Code:

data: "username=" + document.getElementById("username").value +
"&email=" + document.getElementById("email").value,
Like a normal form submit, we refer to the values our user submits by name="". In this instance, we only require the name and the email. We then use the information our user has submitted so that we can enter the information into the database (in submit_data.php). An example of this is ?username=gareth&email=myemail@email.com

Code:
success: function(html){
$("#response").html(html);
Here we basically set what we want to do with whatever is echoed out of submit_data.php. For example, I might echo out: "You are now subscribed to our newsletter. Thank you!" Remember that response div we set up? That will now be placed in that div ($("#response'")).

We then close of the rest of the brackets and the script tag and we are done!