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

View Original

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"]);
?>

Answer

Solution:

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)

Source