AJAX form submit to PHP not returning correct data

Question

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.

Give id to the form element and serialize the data by form id — Shibon
– Shibon, Commented Jul 5, 2017 at 10:16
Have you tried in php with print_r($_POST) for debug perpose? — Ajay Korat
– Ajay Korat, Commented Jul 5, 2017 at 10:17
U have used content type as json and just echo the data try to json_encode from php script — Shibon
– Shibon, Commented Jul 5, 2017 at 10:18
Are you using a php log, maybe you should see what's being outputted to it. Try and find a file on your server called php_error.log and open it in a console. That will tell you what is failing on the server side of the call. Also add this to your php script var_dump($_REQUEST); or var_dump($_POST); more specifically and analyse what's being sent. It sounds like the parameters are not being sent properly. also try replacing data: $('form').serialize(), with data: $(this).serialize(), as it might be looking elsewhere. — Steve C
– Steve C, Commented Jul 5, 2017 at 10:27

Daniel Erez · Accepted Answer · 2017-07-05 10:22:51Z

1

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

answered Jul 5, 2017 at 10:22

Daniel Erez

384 bronze badges

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

Comments

user3429660 · Accepted Answer · 2017-07-05 10:18:33Z

1

Regarding this:

When I do a console log for $('form').serialize() I see email=jackc%[email protected]

You have specified contentType: "json", but you sent something looking like application/x-www-form-urlencoded.

You can see here an example: JQuery Post sends form data and not JSON

answered Jul 5, 2017 at 10:18

user3429660

2,7526 gold badges29 silver badges46 bronze badges

Comments

Mohmmad Ebrahimi Aval · Accepted Answer · 2017-07-05 10:21:55Z

0

test this :

$('form').submit(function(e){
            e.preventDefault();
            var url = 'request.php';
            var $form = $(this);
            var request ={
                email : $form.find("[name=email]").val(),
            };
            $.ajax({
                type: 'POST',
                url: url,
                data: request,
                success: function(data){
                    console.log(data);
                    $('#results').html(data);
                }
            });
        });

answered Jul 5, 2017 at 10:21

Mohmmad Ebrahimi Aval

4821 gold badge7 silver badges21 bronze badges

Comments

Mohammad Hamedani · Accepted Answer · 2017-07-05 10:23:52Z

Add dataType: "json", instead contentType: "json", to send data as form data and receive data as json:

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

    });
});

If you don't want to receive json data, remove contentType at all:

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

    });
});

Masivuye Cokile · Accepted Answer · 2017-07-05 10:27:01Z

add dataType as json instead of contentType and also return json encoded data from server.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<form id="test">
    <label>Email Address:</label>
    <input type='text' name='email' value='[email protected]'/>
    <input type='submit' name='submit' value='Check subscription status'/>
</form>

<div id="results"></div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#test').submit(function(e){
            e.preventDefault();
            var formdata = $('#test').serialize();
            var url = 'request.php';

            alert(formdata);
            $.ajax({
                type: 'POST',
                url: url,
                data: formdata,
                dataType: "json",
                encode :true,
                success: function(data){
                    console.log(data);
                    $('#results').html(data);
                }
            });

        });
    });
</script>

request.php

<?php
$emailAddress = $_POST['email'];
echo json_encode("EMAIL: " . $emailAddress);

?>

Collectives™ on Stack Overflow

AJAX form submit to PHP not returning correct data

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related