form select with ajax - php

Question

I'm building a bug tracker tool.
When you create a project, you can change the project status (open, in progress & finished) on the project page using this select form:
<form action="classes/projectStatus.class.php" method="post">
<label> Change Project Status </label>
<select name="status" id="status">
<option value="Open">Open</option>
<option value="In Progress">In Progress</option>
<option value="Finished">Finished</option>
</select>
<input type='hidden' name='hdnID' value="<?php echo $id;?>">
<input class="small button" value="Change Status" type="submit">
</form>
This is the projectStatus.class.php file:
$status = $_POST['status'];
$id = $_POST['hdnID'];
$sql="UPDATE projects SET status = '$status'";
$result = mysql_query($sql);
$result = mysql_real_escape_string($sql);
if($result){
header('Location: ../projectpage.php?id='.$id);
} else {
echo "There is something wrong. Try again later."; }
mysql_close();
How can I do this with AJAX?
Could anybody provide me with some right code?!
I know the form isn't sql injection proof and I don't use mysqli, I will change this, but first I'd like to have an answer :).
Thanks!

Answer 1

I would use jquery, which will solve a lot of compatibility issues.
There is example code here on the jquery site: http://api.jquery.com/jQuery.post/

Answer 2

You'll want to use jQuery's $.post() function. You should check out the docs here for a ton of examples. So what you could do is change
<form action="classes/projectStatus.class.php" method="post">
to
<form onsubmit="return submit();">
and then define submit as
function submit()
{
$.post('classes/projectStatus.class.php', {
"status": $('#status').val(),
"hdnID": $('#hdnID').val()
}, function(response) {
//your callback function
});
return false;
}
This code is untested and might not work, but it's just meant to give you an idea of what to do. Let me know if this makes sense or if you have any questions :)