Join the friendly bunch on IRC...
i. The Aim of this Article By the end of this article, you will hopefully understand how to add data, submitted via a form, into a MySQL database without reloading the entire page (the asynchronous part) and show a message saying so.
ii. Diving Straight In
Including our Framework
First we should include our jQuery file, which can be downloaded at http://www.jquery.com:
Code:
<script type="text/javascript" src="jquery.js"></script>
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>
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>
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>
Code:
function register(){
Code:
$.ajax({
Code:
type: "POST",
Code:
url: "submit_data.php",
Code:
data: "username=" + document.getElementById("username").value +
"&email=" + document.getElementById("email").value,
Code:
success: function(html){
$("#response").html(html);
We then close of the rest of the brackets and the script tag and we are done!
submit_data.php
The last thing to do is to set up our php script. I assume you already know most of this, and how most of this works, so I will give you an example code so that you can edit it to your needs. Note that we access the user information by $_POST['field'] or error checking.
PHP Code:
<?php
// Variables
$db_host = 'localhost';
$db_user = 'user';
$db_pass = 'pass';
$db_name = 'db';
$Username = $_POST['username'];
$Email = $_POST['email'];
// DB
$connect = mysql_connect( $db_host, $db_user, $db_pass ) or die( mysql_error() );
$connection = $connect;
mysql_select_db( $db_name, $connect ) or die( mysql_error() );
// Inserting into DB
$qInsertUser = mysql_query(" INSERT INTO `database` (`id`, `username`, `email`)
VALUES ( ``, `$Username`, `$Email`)
");
if ($qInsertUser){
echo "You are now subscribed to our newsletter. Thank you!";
} else {
echo "Error!";
}
?>
This article shows just how easy jQuery makes AJAX. Not that this is the only way to accomplish the task, but it is, in my opinion, one of the easiest methods to understand. Of course, this method is totally dependent on the fact that we assume our users have JavaScript turned on. In my next article, I will explain how we can still make the form work if they have it turned off. But, I think for now, this is enough.
Gareth
