$_POST array empty in php after submission of a form using a formData

Question

I've seen several posts about the issue but none of them solved my problem. I'm working with XAMPP and I have an html index.html and a php remote.php in the same folder.

The formData which I want to send to the php is created using a form (basic_form) in javascript. It resulted to be well constructed, since console.log(...formData); printed Array [ "mode", "basic" ], Array [ "file", File ] as expected, which are the string and the input file.

But unfortunately in the php the command print_r($_POST); outputs only Array() and also the command var_dump($_POST); outputs array(0){}. So it seems that the content of the form is not passed to the php.

Here it is the html form:

<body>
    <div>
        <form name="basic_form" enctype="multipart/form-data" action="remote.php" method="post">
            <input type="text" id="mode" name="mode" value="basic"/>
            <input type="file" id="file" name="file"/>
            <input type="submit" id="submit_basic_input" name="submit_basic_input" value="Submit"/>
        </form>
    </div>
</body>

Here the javascript to submit the form:

<script>
    var basic_form = document.forms["basic_form"];
    basic_form.addEventListener('submit', e => {
        e.preventDefault(); 

        const url = 'remote.php';
        const formData = new FormData(basic_form);

        fetch(url, {
                method: 'POST',
                body: formData
            }).then(response => {
                console.log(response);
                if(response["status"] == 200)
                    location.replace(response["url"]);
        });
                
    });
</script>

Here the php to print the content of form:

<?php
    var_dump($_POST);
    $datapost = $_POST;
    print_r($datapost);
    print($datapost["mode"]);
?>

Quentin · Accepted Answer · 2021-03-21 23:17:06Z

1

First, you call fetch which makes a POST request

When you get a response, you log the response object (which doesn't hold anything all that useful, in particular the body of the response will show up as a readable stream and not a string).

That response does show array(1) { ["mode"]=> string(5) "basic" } Array ( [mode] => basic ) basic though, you can see it using the Network tab of the browser's developer tools.

After logging the response you set location.replace(response["url"]); which makes a GET request (to the same URL) and navigates the browser to it.

The GET request is a different request and does not have the request body from the POST request from it.

Since it is a different request, it gets a different response and now $_POST is an empty array.

If you want to navigate to the response then get rid of the JavaScript. Just make the POST request with the form and let the browser render the resulting page.

If you want to use Ajax to make the request then:

Don't immediately navigate away from the page
Do something useful with the response (starting by calling response.text() to get the data out of the response body and then perhaps using createElement, appendChild and friends to add the data to the current document)

answered Mar 21, 2021 at 23:17

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lostefra Over a year ago

Thanks a lot, I miss the fact that I was doing both a POST and a GET request (to be honest that location.replace(response["url"]); came from a template, I was not considering it harmful). I tried successfully to save to file in the php the content of $_POST after the POST request and it was as expected.

Collectives™ on Stack Overflow

$_POST array empty in php after submission of a form using a formData

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related