AJAX form submitted to PHP that does not return the correct data

advertisements

I have a form that I would like to send data from to a php script using AJAX. However I am running into an issue with actually passing the data across. The $_POST array is empty for some reason.

Currently the HTML is:

<form>
    <label>Email Address:</label>
    <input type='text' name='email' value='[email protected]'/>
    <input type='submit' name='submit' value='Check subscription status'/>
</form>

The JQuery is:

 $(document).ready(function() {
        $('form').submit(function(e){
            e.preventDefault();
            var url = 'request.php';
            $.ajax({
                type: 'POST',
                url: url,
                contentType: "json",
                data: $('form').serialize(),
                success: function(data){
                    console.log(data);
                    $('#results').html(data);
                }
            });

        });
    });

The PHP is:

        $emailAddress = $_POST['email'];
        echo "EMAIL: " . $emailAddress;

However it's not returning anything. It's blank each time. When I do a console log for $('form').serialize() I see email=jackc%[email protected] which I would expect to see returned from my PHP.

I'd appreciate some help on this. Many thanks.


you don't send json data so you need to remove the "contentType" from the ajax request.