Prevent the default action when using jQuery for Ajax

Question

I'm trying to prevent the default action when submitting a form with ajax but I believe I have my code wrong as the page seems to do a 'refresh' and the form clears but nothing is sent to the database. I tried adding the link to the php processing script in the 'action' part of the form and it does submit fine to the database so the problem seems to be with my jQuery code.

    <script type="text/javascript">
$(document).ready(function(e){
        e.preventDefault();
    $("#rpack_add_form").validate({
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $("#rpack_add_form").serialize(), function(data) {
                $('#ajaxResult').html(data);
            });
        }
    });
});
</script>

My form code:

<div id="rpacks_admin" style="display: none;">
<h5>Add A New Recovery Pack</h5>
    <form id="rpack_add_form" class='small_form' name='rpack_add_form' action='' method='post'>
        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 content</p>
            </div>
            <div id="contract3" class="admin_box">
                <p>Sapce for contentrm</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' name='add_rpack'>            
    </form>
<a class='hide_div' href='javascript:void(0);' onclick='hideRdiscDiv()'>Close</a>

and my PHP if needed

            <?php
            session_start();
            include_once 'config.php';
            include_once 'connect.php';
            include_once 'bcrypt.php';
            $prefix = $_POST['prefix'];
            $number = $_POST['number'];
            $suffix = $_POST['suffix'];
            $contract = $_POST['contract'];
            $received = $_POST['received'];
            $location = $_POST['location'];

            //Check if password and username has been submitted then add to DB
            if (empty ($number))
            {
                echo "You need to enter a recovery pack 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

The .validate() object has a sendForm parameter. It is set to true by default, but you need to set it to false , as in the code below, to prevent the form from being submitted:

$(document).ready(function () {
    $('#rpack_add_form').validate({
        submitHandler: function (form) {
            // do other stuff for a valid form
            $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $('#rpack_add_form').serialize(), function (data) {
                $('#ajaxResult').html(data);
            });
        },
        sendForm: false
    });
});

You can reference the docs for more info.