CODEWITHSUNDEEP
phpjqueryajax
Javacadabra
Javacadabra

Reputation: 5758

AJAX form submit to PHP not returning correct data

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.

Upvotes: 0

Views: 891

Answers (5)

Masivuye Cokile
Masivuye Cokile

Reputation: 4772

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

?>

Upvotes: 0

Mohammad Hamedani
Mohammad Hamedani

Reputation: 3354

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);
            }
        });

    });
});

Upvotes: 0

Daniel Erez
Daniel Erez

Reputation: 38

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

Upvotes: 1

Mohmmad Ebrahimi Aval
Mohmmad Ebrahimi Aval

Reputation: 482

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);
                }
            });
        });

Upvotes: 0

user3429660
user3429660

Reputation: 2722

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

Upvotes: 1

Related Questions