Fetch API sends empty post array

Question

I want to send all the data acquired from a html form to the php script using POST method.

My HTML:

<form id="details" class="form">

    Full name: <strong name="name_1">ABCDEF</strong><br><br>
    ID No:<strong name="org_number_1">23</strong><br><br>
    Mobile No:<strong name="ph_number_1">1234567890</strong><br><br>

    E-mail: <strong name="email_1">abc@def.com</strong><br><br>
    ID Card: <img src="profile.jpg" alt="preview" name="image" style="width: 100px; height: 100px;"><br><br>

    <button id="go" onclick="submit()"type="button" value="submit">Submit</button>

</form>

My javascript:

function submit(){

    var nme=document.getElementsByName("name_1")[0].innerHTML;
    var id=document.getElementsByName("org_number_1")[0].innerHTML;
    var phone=document.getElementsByName("ph_number_1")[0].innerHTML;
    var email=document.getElementsByName("email_1")[0].innerHTML;
    var img=document.getElementsByName("image")[0].src;

    const dForm = document.getElementById('details');          
    dForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData=new FormData();
        formData.append('name', nme);
        formData.append('email', email);
        formData.append('ID No', id);
        formData.append('Contact no', phone);
        formData.append('image', img);
        fetch("database_registration.php",{
            method: 'post',
            body: formData, 
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
        }).then(function (response){
            return response.text();
        }).then(function (text){
            console.log(text);
        }).catch(function (error){
            console.error(error);
        })
    });
 
}

My php:

<?php
     $post_data=file_get_contents("php://input");
     var_dump($_POST); //shows array(0) { }
     print_r($_POST);//shows Array()
     $data=json_decode($post_data); 
     echo $data; //shows a completely blank page
?>

Why is my $_POST array empty?

add `headers: { 'Content-Type': 'application/json' },` before `body: JSON.stringify(dataString),` — Alive to die - Anant, Jan 14 '21 at 07:58
without knowing the details of php's JSON handling it looks like your `dataString` isn't a useful JSON literal. it will contain your values concatenated as a long string without any separating characters. I could imagine you have to provide a 'proper' JSON object containing your key value pairs. `var dataObj = {"name": nme, "email": email, "ID No": id, "Contact no": phone, "image": img};` then later call `JSON.stringify(dataObj)` — cor3000, Jan 14 '21 at 08:44
Must use `file_get_contents("php://input")`. See https://stackoverflow.com/questions/813487/how-to-post-json-to-php-with-curl — Christian, Jan 14 '21 at 11:04
The page is completely empty, when I use `file_get_contents("php://input");` — , Jan 14 '21 at 11:27
Use the network tab of the browser tools to inspect the traffic to see what is being sent and to double-check the response. In your firs `then` you should be checking `response.ok` to ensure the server has returned the correct response. — Jon P, Jan 15 '21 at 03:38

score 1 · Answer 1 · answered Jan 14 '21 at 12:08

1

It's actually raw post data. You can not receive data using the $_POST variable. You have to do it using

$payload = file_get_contents('php://input');
$data = json_decode($payload);
print_r($data);

NOTE: Sometimes you have to restart the server for no reason. :)

Already answered here

answered Jan 14 '21 at 12:08

Baker Hasan

334
2
11

Doesn't work. Shows a completely blank page. – Jan 14 '21 at 14:32

score -1 · Answer 2 · answered Jan 14 '21 at 10:44

-1

Well, i think you better check on the script in getting the value from the form. Is it an input type? if it is an input type, you should use "value" instead of "innerHTML".

It will be better for you to use use console.log(variable) or use javascript alert, to check whether the value of each parameter you want has value inside before calling submitting form.

answered Jan 14 '21 at 10:44

Rain Lai

9
1
3

No it's not an input type, hence `innerHTML`. And yes, I've checked all the variables using `console.log` before going into `submit()`. They show the values. – Jan 14 '21 at 10:54

Fetch API sends empty post array

2 Answers2