ajax submit form why it cannot echo $_POST

Question

I'm test using ajax submit form (submit to myself page "new1.php")

The thing that I want is, after click submit button, it will echo firstname and lastname. But I don't know why I do not see the firstname and lastname after submit.

here is new1.php page

<?php 
echo $_POST['firstname']."<br>";
echo $_POST['lastname']."<br>"; 
 ?>  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>
    <form id="myform" action="new1.php" method="post">
        Firstname : <input type="text" name="firstname"> <br>
        Lastname : <input type="text" name="lastname"> <br>
        <input type="submit" value="Submit">
    </form>

        <script>
        // this is the id of the form
$("#myform").submit(function(e) {

    $.ajax({
           type: "POST",
           url: 'new1.php',
           data: $("#myform").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert('yeah'); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});
    </script>
</body>
</html>

fistname or firstname ? Check what your element name and what you are trying to echo — Rahul, Jan 11 '17 at 11:35
You will not be able to see the firstname and lastname as its been firstly parsed when you page is loaded. If you need to show it you need to have an hidden field in form and after success of form stick the value to hidden variable in js — Nishant Nair, Jan 11 '17 at 11:39
Pleaes go `inspect elements` the go to `network` here you can see the new1.php page name left hand side click and see the echo may found over there. — Pranav MS, Jan 11 '17 at 11:42

Kalimah · Accepted Answer · 2017-01-11T12:12:15.780

In your case the best option to retrieve values as JSON format using json_encode in your PHP code and then accessing these values through data object.

Example:

PHP code:

if($_POST)
{
    $result['firstname'] = $_POST['firstname'];
    $result['lastname'] = $_POST['lastname'];

    echo json_encode($result);
    die(); // Use die here to stop processing the code further 
}

JS code:

$("#myform").submit(function (e) {

    $.ajax({
        type : "POST",
        url : 'new1.php',
        dataType : 'json', // Notice json here
        data : $("#myform").serialize(), // serializes the form's elements.
        success : function (data) {
            alert('yeah'); // show response from the php script.
            // make changed here
            $('input[name="firstname"]').text(data.firstname);
            $('input[name="lastname"]').text(data.lastname);
        }
    });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

score 2 · Answer 2 · edited Jan 16 '17 at 20:02

2

When you use form as a serialize you have to retrieve like this.

Edit your ajax like this :

data: { formData: $("#myform").serialize()},

Then you can retrieve like this in your controller:

parse_str($_POST['formData'], $var);
echo "<pre>";
print_r($var);
exit;

edited Jan 16 '17 at 20:02

marc_s

732,580
175
1,330
1,459

answered Jan 11 '17 at 11:46

Mr world wide

4,696
7
43
97

score 1 · Answer 3 · edited Jan 11 '17 at 12:17

1

Change from

alert('yeah'); // show response from the php script.

to

alert(data); // show response from the php script.

edited Jan 11 '17 at 12:17

dhruv jadia

1,684
2
15
28

answered Jan 11 '17 at 11:36

Gagandeep Gambhir

4,225
1
29
34

it show value in alert but Can I echo it after submit? – doflamingo Jan 11 '17 at 11:38
1

You should use separate file for that let's say new2.php with echo statements only, and change form action with new2.php as well. – Gagandeep Gambhir Jan 11 '17 at 11:50

score 1 · Answer 4 · answered Jan 11 '17 at 11:42

1

Make some changes in javascript here:

success: function(data)
       {
           $('#response').html(data); // show response from the php script.
       }

And in html code make a div with id response

<div id="response"></div>

answered Jan 11 '17 at 11:42

Zain Farooq

2,956
3
20
42

score 1 · Answer 5 · edited Jan 11 '17 at 12:23

the value firstname, lastname will not display because you called the new1.php via ajax and the data (firstname, lastname and the page code) is returned to java script variable (data) you need to inject the data to your document

Try this

$.ajax({
    type: "POST",
    url: 'new1.php',
    data: $("#myform").serialize(), // serializes the form's elements.
    success: function(data) {
        document.documentElement.innerHTML = data;
    }
});

ajax submit form why it cannot echo $_POST

5 Answers5

Linked