jQuery AJAX issue - page keeps refreshing on submit and data not sent - php

Question

I'm trying to create an dynamic AJAX function using PHP and MySQL but have had little success so far. Its purpose is to update records in a database without refreshing the page or changing to another page.
On the page with the forms I have the following code:
// jQuery
<script type="text/javascript">
<?php
$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);
foreach ($result as $row)
{
echo
"$(document).ready(function() {
$('#updatebtn".$row['id']."').click(function() {
$('#result".$row['id']."').show('slow').delay(4000).hide('slow')
$.post('process.php', $('#updateform".$row['id']."').serialize())
});
return false;
});";
}
?>
</script>
// form
$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);
foreach ($result as $row)
{
echo
'<form id="updateform'.$row['id'].'">
<div class="tbl_header">'.$row['task'].'</div>
Due Date:
<script>
$(function() {
$( "#datepicker'.$row['id'].'" ).datepicker({ minDate: -0,
dateFormat: \'dd/mm/yy\', maxDate: new Date(2013, 1,22) })
});
</script>
<input type="text" id="datepicker'.$row['id'].'" style="width: 100px; height: 10px;" value="'.$row['duedate'].'" name="duedate"/>
Status:
<select style="width: 125px;" name="status">
<option>'.$row['status'].'</option>
<option>----</option>
<option>Pending</option>
<option>In Progress</option>
<option>Complete</option>
</select>
<input type="hidden" name="id" value="'.$row['id'].'">
<input type="submit" id="updatebtn'.$row['id'].'" value="Update"
style="width: 100px;"/>
</form>
<div id="result'.$row['id'].'" style="display: none; color: red">
Update successful!
</div>
<p>';}
On the page responsible for the processing (process.php), I have the following code:
<?php
$name = mysql_real_escape_string($_POST["name"]);
$status = mysql_real_escape_string($_POST["status"]);
$id = mysql_real_escape_string($_POST["id"]);
$sql = "UPDATE pm_schedule SET name=?, status=?, id=? WHERE id=?";
$q = $conn->prepare($sql);
$q->execute(array($name,$status,$id));
?>
What am I doing wrong?

Answer 1

The return false is in the function called on $(document).ready, not in the click-handler, so I guess this causes the form to submit anyway after finishing the clickhandler. Maybe move the statement one line up:
echo
"$(document).ready(function() {
$('#updatebtn".$row['id']."').click(function() {
$('#result".$row['id']."').show('slow').delay(4000).hide('slow');
$.post('process.php', $('#updateform".$row['id']."').serialize());
return false;
});
});";
As ripa said, a few more ; should be helpful either.

Answer 2

place ; over here
foreach ($result as $row)
{
echo
"$(document).ready(function() {
$('#updatebtn".$row['id']."').click(function() {
$('#result".$row['id']."').show('slow').delay(4000).hide('slow');
$.post('process.php', $('#updateform".$row['id']."').serialize());
});
return false;
});";
}