Jquery .load()包含来自表单的数据

Question

我正在尝试在提交表单后将页面加载到模式窗口"checkout.php",但我需要它来加载表单的结果.通常,只需将表单的操作设置为url并传递数据,但在这种情况下,页面需要加载到具有该数据的模态中,这需要使用比我所知更多的jQuery.

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>

我上面的内容将在单击表单的提交按钮后将checkout.php页面加载到模式中.我不是问为什么页面没有加载与表单一起发送的信息.我完全理解我在这里所做的只是执行一个函数来将"checkout.php"加载到作为模态的div中.我需要有人向我解释如何编辑我的函数,以便"checkout.php"被加载,就像它是表单的动作一样,数据将被传递.

在此先感谢您的帮助!

编辑以下

<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;
});

CHECKOUT.PHP页面在哪里调用输入"运输"

<?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

绑定到表单上的提交事件,而不是使用onClick属性.

在提交时,序列化表单值,发布到您的URL并将结果插入目标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;
});

编辑1:鉴于你的HTML,你需要更换

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

同

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

Answer 2

用于$.post()使用 ajax 提交表单。

$('#shippingform').submit(function ()
{
    var $this = $(this);

    $.post('/ash/shop/checkout.php',
    {
        data: $this.serialize()
    }, function (response)
    {
        $('#cartdialog').html(response);
    });

    return false;
});