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>
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
- [Vuejs]-Vue.js bidirectional calculation on input value
- [Vuejs]-Communication between components with Vue and routes