Jquery .load() with data from form

Question

I am trying to load a page into a modal window "checkout.php" after submitting a form, but I need it to load with the results of the form. Normally, one would just set the action of the form to the url and the data gets passed, but in this case, the page needs to be loaded into a modal with that data which requires the use of more jQuery than I know.

HTML

<form id="shippingform" name="shippingform" method="post" action="#">
<table id="box-table-a" width="25%" border="1">
<thead>
    <tr>
        <th scope="col" width="40%">USPS Option</th>
        <th scope="col" width="40%">Price</th>
        <th scope="col" width="20%" style="text-align: right;">Select</th>
    </tr>
</thead>
<tbody>
<tr>
  <td class="first">Ground:</td>
  <td><?php echo "$" . sprintf("%01.2f", $groundTotal) ?></td>
  <td class="last"><input name="shipping" type="radio" id="radio" value="<?php echo $groundTotal ?>" checked="checked" /></td>
</tr>
<tr>
  <td class="first">Priority:</td>
  <td><?php echo "$" . sprintf("%01.2f", $priorityTotal) ?></td>
  <td class="last"><input type="radio" name="shipping" id="radio2" value="<?php echo $priorityTotal ?>" /></td>
</tr>
<tr>
  <td class="first">Express:</td>
  <td><?php echo "$" . sprintf("%01.2f", $expressTotal) ?></td>
  <td class="last"><input type="radio" name="shipping" id="radio3" value="<?php echo $expressTotal ?>" /></td>
</tr>
</tbody>
</table>
<a href="#" onclick="totalCalc()">submit</a>
</form>

JS

<script language="javascript">
function totalCalc() {
$('#cartdialog').load("/ash/shop/checkout.php");
}
</script>

What I have above will load the checkout.php page into the modal after clicking the submit button for the form. I AM NOT asking why the page isnt loading with the information sent with the form. I completely understand that what I am doing here is simply executing a function to load "checkout.php" into the div that is the modal. I need someone to explain to me how I can edit my function so that "checkout.php" gets loaded like if it were the action of the form, the data would be passed through.

Thanks in advance for the help!

EDIT BELOW

<form id="shippingform" name="shippingform" method="post" action="#">

JS

$('#shippingform').submit(function(event){
var data = $(this).serialize();
$.post('/ash/shop/checkout.php', data)
    .success(function(result){
        $('#cartdialog').html(result);
    })
    .error(function(){
        console.log('Error loading page');
    })
return false;
});

THE CHECKOUT.PHP PAGE WHERE IT CALLS THE INPUT "shipping"

<?php 
//total up price of all items
$subtotal = ($subtotal + ($row_rsMyCart['price'] * $row_rsMyCart['quantity']));
$myTotal = ($subtotal + $_POST['shipping']);

} while ($row_rsMyCart = mysql_fetch_assoc($rsMyCart)); ?>
</table>
<p>
<?php
//development
echo "<br>";
echo "Subtotal: $" . sprintf("%01.2f", $subtotal);
echo "<br>";
echo "Total: $" . sprintf("%01.2f", $myTotal);
?>
</p>

Answer 1

Bind to the submit event on your form, instead of using the onClick attribute.

On submit, serialise the form values, post to your url and insert the result into the target div.

$('#myform').submit(function(event){
    var data = $(this).serialize();
    $.post('/ash/shop/checkout.php', data)
        .done(function(result){
            $('#cartdialog').html(result);
        })
        .fail(function(){
            console.log('Error loading page');
        })
    return false;
});

EDIT 1: Given your html, you need to replace

<a href="#" onclick="totalCalc()">submit</a> 

with

<input type="submit" name="submit" value="Submit">