[Vuejs]-PHP sends back empty body

0👍

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> element1, 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'])){

1https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

Leave a comment