jQuery Ajax not submitting data - php

Question

I decided to have my first go with ajax to submit my data but I'm having problems. The form seems to reset but no data is sent to the database, I'm probably missing something obvious here:
jQuery (currently included in the header of my file)
<script>
// jQuery to submit form data via AJAX to add a recovery pack
$.ajax({
type:'POST',
url: 'addrpack.php',
data:$('#rpack_add_form').serialize(),
success: function(response)
{
$('#rpack_add_form').find('.form_result').html(response);
}}
</script>
The PHP/HTML form
<form id="rpack_add_form" class='small_form' name='rpack_form' method='post' onsubmit="return submitForm();">
Contract:
<select id="contract_select" name="contract" onchange="showContract(this)">
<option value='0'>Select Contract</option>
<?php
$sth = $conn->query("SELECT * FROM `contracts`");
while($row = $sth->fetch(PDO::FETCH_ASSOC))
{
echo '<option value='.$row['contracts_id'].'>'.$row['contracts_name'].'</option>';
}
?>
</select>
<div id="contract1" class="admin_box">
Prefix: <input name='prefix' type='text' id='prefix'><br />
Number: <input name='number' type='text' id='number'><br />
Suffix: <input name='suffix' type='text' id='suffix'><br />
</div>
<div id="contract2" class="admin_box">
<p>Sapce for 2nd form at a later date</p>
</div>
<div id="contract3" class="admin_box">
<p>Sapce for 3rd form at a later date</p>
</div>
Received:
<select id="select_receive" name="received" onchange="showLocation(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select><br />
<div id="location_box" style="display: none; padding-top: 5px;">Location: <input name='location' type='text' id='location'></div>
<input class='button' type=submit value='Add Recovery Pack' name='add_rpack'>
</form>
<div class="form_result"> </div>
<a class='hide_div' href='javascript:void(0);' onclick='hideRdiscDiv()'>Close</a>
The PHP for addrpack.php (this code works fully when I remove the ajax part from above and just submit as normal)
<?php
session_start();
include_once 'config.php';
include_once 'connect.php';
$prefix = $_POST['prefix'];
$number = $_POST['number'];
$suffix = $_POST['suffix'];
$contract = $_POST['contract'];
$received = $_POST['received'];
$location = $_POST['location'];
//Check if a number has been entered
if (empty ($number))
{
echo "You need to enter a number";
}else
{
$sth = "INSERT INTO `rpacks` (rpacks_prefix, rpacks_number, rpacks_suffix, rpacks_contract, rpacks_receive, rpacks_location) VALUES (:prefix, :number, :suffix, :contract, :received, :location)";
$q = $conn->prepare($sth);
$q->execute(array(':prefix'=>$prefix,':number'=>$number,':suffix'=>$suffix,':contract'=>$contract, ':received'=>$received, ':location'=>$location));
echo "Added";
}

Answer 1

Probably a syntax error - missing );
$('#rpack_add_form').submit(function(){
$.ajax({
type:'POST',
url: 'addrpack.php',
data:$('#rpack_add_form').serialize(),
success: function(response)
{
$('#rpack_add_form').find('.form_result').html(response);
}
});
return false;
});

Answer 2

$.ajax({
type:'POST',
url: 'addrpack.php',
data:{"data":$('#rpack_add_form').serialize()},
success: function(response)
{
$('#rpack_add_form').find('.form_result').html(response);
}
});//Syntax misatke

Answer 3

Not sure what your onsubmit="return submitForm();" in form does but you have to stop the submit button from sending the data and instead make it use your ajax function.
$(function(){
$('.button').click(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url: 'addrpack.php',
data:$('#rpack_add_form').serialize(),
success: function(response) {
$('#rpack_add_form').find('.form_result').html(response);
}
});
});
});