Question

Just started using AJAX today via JQuery and I am getting nowhere. As an example I have set up a job for it to do. Submit a form and then display the results. Obviously I haven’t got it right.

The HTML.

<form id="PST_DT"  name="PST_DT" method="post">
<input name="product_title_1682" id="product_title_1682" type="hidden" value="PADI Open Water">
<input name="product_title_1683" id="product_title_1683" type="hidden" value="PADI Advanced Open Water">

<input type="submit" name="submit" id="submit" value="Continue" onclick="product_analysis_global(); test();"/>

</form>
<span id="results"></span>

There are actually many more fields all loaded in dynamically. I plan to use ajax to submit to PHP for some simple maths and then return the results but we can worry about that later.

The JQuery

function test() {

    //Get the data from all the fields
    var alpha = $('#product_title_1682').val();
    JQuery.ajax({
        type: 'POST',
        url: 'http://www.divethegap.com/update/functions/totals.php',
        data: 'text=' + alpha,
        beforeSend: function () {
            $('#results').html('processing');
        },
        error: function () {
            $('#results').html('failure');
        },
        timeout: 3000,

    });
};

and the PHP

<?php
$alpha = $_POST['alpha'];
 echo 'Marvellous',$alpha;
       ?>

That’s my attempt and nothing happens. Any ideas?

Marvellous.

Answer 1

First of all, you’re passing the $_POST variable as ‘text’ while your script is looking for $_POST['alpha']. If you update your PHP to $_POST['text'], you should see the proper text.

Also, if your form is going to have lots of inputs and you want to be sure to pass all of them to your AJAX Request, I’d recommend using jQuery’s serialize() method.

data: $('#PST_DT').serialize(), // this will build query string based off the <form>
// eg: product_title_1682=PADI+Open+Water&product_title_1683=PADI+Advanced+Open+Water

In your PHP script you’d then need to use $_POST['product_title_1682'] and $_POST['product_title_1683'].

UPDATE Add a success callback to your $.ajax call.

function test() {        

    // serialize form data
    var data= $('#PST_DT').serialize();

    // ajax request
    $.ajax({
        type  : 'POST',
         url  : 'http://www.divethegap.com/update/functions/totals.php',
         data : data,
         beforeSend : function() {
             $('#results').html('processing');
         },
         error : function() {
             $('#results').html('failure');
         },
         // success callback
         success : function (response) {
             $('#results').html(response);
         },
         timeout : 3000,
    });

};

In your PHP script you can debug the information sent using:

var_dump($_POST);