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>

Possible duplicate: stackoverflow.com/questions/1218245/… The question is not quite the same but the answers are equivalent, that's why I marked this as duplicate. — pgpb.padilla
– pgpb.padilla, Commented Sep 5, 2012 at 15:27

Antoine Pinsard · Accepted Answer · 2017-07-25 09:13:38Z

11

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

edited Jul 25, 2017 at 9:13

Antoine Pinsard

35.3k9 gold badges73 silver badges91 bronze badges

answered May 11, 2011 at 22:55

Rob Cowie

22.6k6 gold badges65 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

livinzlife Over a year ago

@robcowie @mattball Seems like these two are pretty close and are doing the same thing. I am getting spit out to the site root with the data appended to the end like this: www.siteroot.com/?shipping=19.32 Ultimately the goal is to load "checkout.php" which is found at www.siteroot.com/ash/shop/checkout.php with the data INSIDE the modal. I have been using .load() to load the contents of the page within the modal

livinzlife Over a year ago

@robcowie closer but still no cigar... This is actually causing the page to reload on "checkout.php" when what I need to do is ONLY reload the contents of the div #cartdialog with "checkout.php" Also, it is appending the data to the end of the URL, and normally the form will post, "checkout.php" will load with the submitted data and there will be nothing extra in the url

Rob Cowie Over a year ago

@livinzlife: I've fixed a bug in my answer so try again. As for the query string, .post() will not cause that to happen. Make sure you remove your original totalCalc() function (or otherwise ensure it is not called).

livinzlife Over a year ago

@robcowie Sorry I didnt realize I couldnt put code in comments. I edited my original post. I fixed the form, made use of a regular form submit button, and got rid of totalCalc(). Now my modal window just disappears and nothing happens. The checkout.php page is not loaded into the #cartdialog div, and I dont know how to check whether the form was submitted or not

Nick Over a year ago

I would like to note that the jQuery API has changed and .success() and .error() are no longer supported. They have been replaced by .done() and .fail()

|

Matt Ball · Accepted Answer · 2011-05-11 22:46:44Z

2

Use $.post() to submit the form using ajax.

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

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

    return false;
});

answered May 11, 2011 at 22:46

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

1 Comment

experimenter Over a year ago

In the example above it should just be $this.serialize() as the data param and not {data: $this.serialize() }

Collectives™ on Stack Overflow

Jquery .load() with data from form

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related