So you want to try AJAX? Here we will use JQuery with PHP (Download it from jquery.com) and it’s really easy:
1. First lets make a form so that when you submit it, Javascript will grab all the fields… All of this will be done in a file called index.html until we get to the PHP page.
<form id="info">
Name: <input type="text" name="name" /><br />
Age: <input type="text" name="age" /><br />
Color: <input type="text" name="color" /><br />
<input type="submit" />
</form>
<div id="output"></div>
2. Looks good, now lets make JQuery do something with it. You have to include JQuery before you use it, so you’ll have something like this in your <head></head> tags:
<script type="text/javascript src="jquery.js" />
3. Now lets create the standard document ready:
<script type="text/javascript">
$(document).ready(function() {
// Everything will go here.
});
</script>
4. Now let’s make the submit happen, remember the ID of the form was info, so… You also want to return false inside so that the server doesn’t actually refresh the page.
<script type="text/javascript">
$(document).ready(function() {
$("#info").submit(function() {
// Now we do something in here after the form submits.
return false;
});
});
</script>
5. Everything looks pretty good so far, time for the AJAX! We’ll be using $.post, to post data.
<script type="text/javascript">
$(document).ready(function() {
$("#info").submit(function() {
// We serialize the post form, this grabs all the post values in the form.
var info = $(this).serialize();
// We are posting to test.php, and we pop in the serialized info var to go to the server.
// the last parameter is the callback, and with this we output stuff.
// So it goes: $.post(PAGE, DATA_TO_POST, WHAT_TO_DO_WHEN_DONE(variable_from_page_data) {}
//
$.post('test.php', info, function(data) {
// now we gotta write the php before we mess with this!
});
return false;
});
});
</script>
6. Make a test.php page and let’s put in:
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$color = $_POST['color'];
// You could have a bunch of stuff go on here, save to a database, validate your data (which you should),
// and a conditional statement could echo out the results.
// Important: You want to echo the results, not just return them!
echo "You posted your name as <b>$name</b>, age <b>$age</b>, and favorite color as <b>$color</b>";
7. Okay now back to the javascript part!
<script type="text/javascript">
$(document).ready(function() {
$("#info").submit(function() {
var info = $(this).serialize();
$.post('test.php', info, function(data) {
// We not pop the output inside the #output DIV.
$("#output").html(data);
});
return false;
});
});
</script>
[B]8. Final Results:
index.html[/B]
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#info").submit(function() {
var info = $(this).serialize();
$.post('test.php', info, function(data) {
// We not pop the output inside the #output DIV.
$("#output").html(data);
});
return false;
});
});
</script>
</head>
<body>
<form id="info">
Name: <input type="text" name="name" /><br />
Age: <input type="text" name="age" /><br />
Color: <input type="text" name="color" /><br />
<input type="submit" />
</form>
<div id="output"></div>
</body>
</html>
test.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$color = $_POST['color'];
echo "You posted your name as <b>$name</b>, age <b>$age</b>, and favorite color as <b>$color</b>";
So what next? Dissect the code and get familiar with it!.
You can do a lot more, but starting with something simple to work with can propel you much further because it’s a great source of motivation 