isset not working with AJAX

Question

No matter what I've tried, isset doesn't work when I make a post call with Vue Resource. It only works when I turn off preventDefault and go directly to the PHP page.

JS:

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

PHP:

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

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" type="submit" name="submit" class="waves-effect waves-light btn">Submit</button>
                        </div>
                    </form>

$_REQUEST handles both post and get. I've also tried it with $_POST and it doesn't work. — adace1, Jul 20 '17 at 18:59
Do you get any errors? Have you tried using firebug or similar to track issues? — GrumpyCrouton, Jul 20 '17 at 19:01
No errors, just an empty body. (I'm using Chrome Dev Tools and Postman) — adace1, Jul 20 '17 at 19:02
Try to put an else statement on your `isset` to see if it's outputting anything at all? Are you sure it's actually sending the request/hitting the page? — GrumpyCrouton, Jul 20 '17 at 19:03
Try to output the contents of `$_POST['submit']` - it may be ignoring it because it's empty — GrumpyCrouton, Jul 20 '17 at 19:05
Okay, maybe check another variable, E.G `isset($_POST['title'])` — GrumpyCrouton, Jul 20 '17 at 19:07
So none of your data is actually being posted. Maybe the way you are passing the data is incorrect - I'm not sure, never seen anyone do it the way you have — GrumpyCrouton, Jul 20 '17 at 19:15
I've tried it with jQuery $.post and axios and neither work with AJAX. But as I said, they do work when I just go directly to the PHP page. — adace1, Jul 20 '17 at 19:16
That leads me to believe even more that it's the way your passing the data. Maybe [This page](https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh) can help you further. — GrumpyCrouton, Jul 20 '17 at 19:18
Try to use use empty: if(!empty($_REQUEST['submit'])){ echo json_encode($_REQUEST); } — Just_Do_It, Jul 20 '17 at 19:21
Still doesn't work. (I actually tried the serialize method in another project and it worked fine.) And I've tried to looking at empty($_REQUEST) and count($_REQUEST) and they give me 1 and 0 respectively. — adace1, Jul 20 '17 at 19:22
How about this: if($_SERVER['REQUEST_METHOD'] == 'POST') { echo json_encode($_REQUEST); exit; // this is important! } — Just_Do_It, Jul 20 '17 at 19:27
It works!!! Thank you! But why didn't the normal isset check work? — adace1, Jul 20 '17 at 19:29
@AaronFeigenbaum the problem is with your js code you cant use FormData as is, since vue resource expect key value pair object, and in your php code the condition `if(isset($_REQUEST['submit']))` will never evaluates to `true` since your are submitting via ajax it will be ignored, so remove it, please check my answer — Ivan Vilanculo, Jul 20 '17 at 20:02
Possible duplicate of [FormData does't include the button Javascript](https://stackoverflow.com/questions/40202168/formdata-doest-include-the-button-javascript) — Sᴀᴍ Onᴇᴌᴀ, Jul 28 '17 at 19:12
If you looked at [my answer](https://stackoverflow.com/a/45247800/1575353) to one of your other (nearly identical) questions you would hopefully see that it explains many of the issues here... (partly covered in some of the answers below)... — Sᴀᴍ Onᴇᴌᴀ, Aug 01 '17 at 00:22

score 0 · Answer 1 · answered Jul 20 '17 at 19:05

0

Ajax no send the "types submit". Change PHP code by next example to check this.

PHP

var_dump( $_POST );die();

The Form is a php array assoc, you remove json_decode.

answered Jul 20 '17 at 19:05

MikeSouto

265
1
7

Just_Do_It · Answer 2 · 2017-07-20T19:43:37.903

0

Here you go:

if($_SERVER['REQUEST_METHOD'] == 'POST') 
{ 
    echo json_encode($_REQUEST); exit; // this is important! 
}

But am not sure why your code didn't work, the main problem with $_REQUEST is not so much that it has data from $_GET and $_POST, but also from $_COOKIE and they sometimes can override each other.

edited Jul 20 '17 at 19:43

answered Jul 20 '17 at 19:31

Just_Do_It

821
7
20

Whoops, spoke too soon. When I try to echo $_POST['title'] I get undefined index and when I print_r($_POST) I get Array () 1. And I tried changing it back to isset($_POST) and it goes to the if block now??? – adace1 Jul 20 '17 at 19:47
Wow, I finally got it. I removed the Vue Resource script tag and switched to a normal jQuery post and it works fine. Something in the Vue Resource code must be really messed up. – adace1 Jul 20 '17 at 19:58
See [my answer](https://stackoverflow.com/a/45247800/1575353) to your other question for a more thorough explanation. – Sᴀᴍ Onᴇᴌᴀ Jul 28 '17 at 19:14

Ivan Vilanculo · Answer 3 · 2017-07-20T19:58:59.567

You can't use the FormData object as is, because it implements iterator, you need to convert it to a object with key value pair data. Please try to change your code as follow:

JS:

var postData = {};
for(var entry of new FormData($("#submitalbum")[0]).entries()){
    postData[entry[0]] = entry[1];
}

this.$http.post('http://localhost/musicdatabase/addalbum.php', postData)
                .then(data => console.log(data.body));

UPDATE

You will have to remove your condition if($_POST['submit']) or put an hidden field named submit to work.

isset not working with AJAX

3 Answers3