PHP sends back empty body - php

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"1, 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