NULL data object showing in my php script

Question

I want to send the data ('ABCDEF','23','1234567890','abc@def.com' and the image 'profile.jpg'), into my phpscript, with the help of FETCH api.

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;
    var dataString = {"name": nme, "email": email, "ID No": id, "Contact no": phone, "image": img};
    
    const dForm = document.getElementById('details');          
    dForm.addEventListener('submit', function(e) {
        e.preventDefault();
        fetch("database_registration.php",{
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(dataString), 
        }).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");
      $data = json_decode($post_data); 
      var_dump($data);         //shows NULL
?>

Why is my $data object NULL? How do I fetch those data?

EDIT: I have also followed this step

Answer 1

Why not getting your post inputs one by one and defining them each in a variable?

$name = $_POST['name']
$id = $_POST['ID No']
$email = $_POST['email']
$phone = $_POST['ContactNo']
$img = $_POST['image']

Answer 2

Apparently you try to contact an API on your localhost at port 5500:

127.0.0.1:5500

By default a lot of things are forbidden, you have to allow it. The server where the API is should have the CORS correctly set. You can either set them on your Apache or Nginx server, or in your app (for example NodeJS app).

• CORS on Apache
• CORS on nginx
• CORS on Node

Answer 3

The data won't be availabe in the super global variables ($_POST in this case) because it's not coming from a multipart-data form or an application/x-www-form-urlencoded. You should be able to see the data reading 'php//input':

<?php
     $post_data = file_get_contents("php://input")
     $data = json_decode($post_data); 
     var_dump($data); //You can't echo an object

MY REFACTOR

<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.png" alt="preview" name="image" style="width: 100px; height: 100px;"><br><br>
    
        <button id="go" type="submit">Submit</button>
    
    </form>

document.getElementById('details').addEventListener('submit', function(e) {
            e.preventDefault();
            submitData();
        });

function submidData() {
    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;
    var dataString = {"name": nme, "email": email, "IDNo": id, "ContactNo": phone, "image": img};

    fetch("database_registration.php", {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: JSON.stringify(dataString)
        }).then(function (response){
            return response.text();
        }).then(function (text){
            console.log(text);
        }).catch(function (error){
            console.error(error);
        });
}

MY OUTPUT

object(stdClass)[1]
  public 'name' => string 'ABCDEF' (length=6)
  public 'email' => string 'abc@def.com' (length=11)
  public 'IDNo' => string '23' (length=2)
  public 'ContactNo' => string '1234567890' (length=10)
  public 'image' => string 'http://localhost/so-test/profile.png' (length=36)