PHP sends back empty body

Question

I'm trying to send form data from Vue Resource to my PHP page. I can see it displayed on the PHP page but when I send it back as JSON I get an empty response. Why is it sending an empty response?

Edit:

It looks like the problem is that the value for the submit button is not set in PHP. I am not sure why that is happening. Tried using $_REQUEST and axios/$.post but it makes no difference.

PHP:

if(isset($_POST['submit']){
   echo json_encode($_POST);
}

JS:

this.$http.post('addalbum.php', new FormData($('#submitalbum')))
.then(data => console.log(data));

HTML:

<form class="col s12" id="submitalbum" method="post" action="addalbum.php">
    <div class="row">
        <div class="input-field col s6">
            <input  name="artist" placeholder="Artist" type="text">

        </div>
        <div class="input-field col s6">
            <input  name="title" placeholder="Title" type="text">

        </div>
    </div>
    <div class="row">
        <div class="input-field col s12">
            <input  name="genre" placeholder="Genre">

        </div>
    </div>
    <div class="row">
        <div class="input-field col s12">
            <input  id="released" type="number" name="released" placeholder="Year Released">
        </div>
        <button @click.prevent="addNewAlbum" name="submit" class="waves-effect waves-light btn">Submit</button>
    </div>
</form>

Answer 1

The empty response is returned for multiple reasons. See them explained below.

jQuery selector

It appears that the selector for finding the form uses the jQuery id selector:

this.$http.post('addalbum.php', new FormData($('#submitalbum')))

But the jQuery function (i.e. $()) returns a collection (an array):

var submitAlbumCollection = $('#submitalbum');
console.log('submitAlbumCollection: ', submitAlbumCollection);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="col s12" id="submitalbum" method="post" action="addalbum.php"></form>

However FormData() needs "An HTML <form> element"¹, not an array.

So if you are going to use the jQuery function, take the first element from it to get the reference to the form:

var forms = $('#submitalbum');
if (forms.length) {
    this.$http.post('addalbum.php', new FormData(forms[0]))

button elements don't send value

A <button> is not a form input and hence there would not be a corresponding value in the form data. This if you want to check for form values, try checking for the artist, title, etc.

if(isset($_POST['artist'])) {
    echo json_encode($_POST);
}

If you really wanted to check if $_POST['submit'] is truthy, you could:

• add a hidden input:

  <input type="hidden" name="submit" value="1">
  

• convert the button to a submit button

  <input type="submit" name="submit" value="1">
  

• take the suggestion from this answer and manually append an entry to the form data

See a demonstration in this phpfiddle. Note that phpfiddle doesn't allow multiple pages so the code from addalbum.php was placed at the top, and references to it were replaced with <?php echo $_SERVER['PHP_SELF'];?> (i.e. in the client-side code).

Missing parenthesis

Additionally, there is a missing parenthesis on the first line of the PHP code:

if(isset($_POST['submit']){

To correct this, add the missing closing parenthesis to close the expression:

if(isset($_POST['submit'])){

---

¹_{https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData}