Jquery .load () с данными из формы - PullRequest
Новая
       12

Jquery .load () с данными из формы

9 голосов
/ 12 мая 2011

Я пытаюсь загрузить страницу в модальное окно "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» загружался так, как если бы это было действие формы, через которые были бы переданы данные.

Заранее спасибо заhelp!

РЕДАКТИРОВАТЬ НИЖЕ 

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

Ответы [ 2 ]

11 голосов
/ 12 мая 2011

Привязка к событию отправки в форме вместо использования атрибута 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">
2 голосов
/ 12 мая 2011

Используйте $.post() для отправки формы с использованием ajax. 

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

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

    return false;
});
...