Cannot send data from html script to php (using POST method)

I am trying to send data from a html script to the php server, using XMLHttpRequest(). My codes are as following:

The HTML part:

<h2>Please finalize your details</h2>  <form id="details" method="post" class="form">        Full name: <strong name="name_1"></strong><br><br>      ID No:<strong name="org_number_1"></strong><br><br>      Mobile No:<strong name="ph_number_1"></strong><br><br>            E-mail: <strong name="email_1"></strong><br><br>      ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;"><br><br>        <button id="go" style="background-color: whitesmoke">It's correct</button>        </form>  

The Javascript part:

document.getElementById('go').addEventListener('click', submit);  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 xhr=new XMLHttpRequest();      xhr.open("POST", "database_registration.php",true);      xhr.setRequestHeader("Content-type", "application / json");        xhr.onload=function(){            const serverResponse=document.getElementById("response");          serverResponse.innerHTML=this.responseText;      };        xhr.send("name="+nme+"&id="+id+"&phone="+phone+"&email="+email+"&img="+img);  }    // This part fetches the values from a html form and writes them in the html page mentioned above    var arr=document.cookie.split(';')  for(var i=0; i<arr.length; i++){        var c=arr[i].split('=');      if (c[0].trim()=='name'){          document.getElementsByName("name_1")[0].innerHTML=c[1];      }      else if(c[0].trim()=='ID No'){          document.getElementsByName("org_number_1")[0].innerHTML=c[1];      }      else if(c[0].trim()=='Mobile No'){          document.getElementsByName("ph_number_1")[0].innerHTML=c[1];      }      else if(c[0].trim()=='Email'){          document.getElementsByName("email_1")[0].innerHTML=c[1];      }  }    const image = localStorage.getItem("Image");  document.getElementsByName("image")[0].src=image;  

The php part:

<?php      session_start();      header("Access-Control-Allow-Origin: *");        foreach($_POST as $post_var){            echo strtoupper($post_var)."<br />";            }  ?>  

---

I have also configured XAMPP and Visual Studio Code, in the following ways:

• I am using the extension Open PHP/HTML/JS In Browser to execute my script in my browser. I have changed the url and the port number in the settings. (80 since apache runs on local host port 80)

port_settings

• I have also set the `php executable path to as shown in the picture below:

php_settings

---

Now, when I run my script, nothing shows up:

output

As you can see, my php page is completely blank. There aren't any errors showing in my console too. How do I echo the values that were fetched?

Also, how do I get an acknowledgement that the data has been sent to the php server?

https://stackoverflow.com/questions/65751465/cannot-send-data-from-html-script-to-php-using-post-method January 16, 2021 at 11:48PM