POST payload not being read by PHP page - php

Question

I'm sending data to a PHP page in the form of a POST request. On chrome dev tools I can see the POST with payload of:
"username=T&password=t&cpassword=t&email=t&cemail=t"
My PHP file starts with the following:
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$cpassword = $_POST['cpassword'];
$email = $_POST['email'];
$cemail = $_POST['cemail'];
echo("Username: $username <br>Password: $password <br>cPassword: $cpassword <br>Email: $email <br>cEmail: $cemail");
....
However, the page just shows:
Username: Password: cPassword: Email: cEmail:
Why is this and how can I make it so that $username, $password, $cpassword, $email and $cemail are set?
EDIT: method for generating post data is as follows:
<script>
function validateForm() {
window.alert("Form submitted");
var username = encodeURIComponent(document.getElementById("username").value);
var password = encodeURIComponent(document.getElementById("password").value);
var cpassword = encodeURIComponent(document.getElementById("cpassword").value);
var email = encodeURIComponent(document.getElementById("email").value);
var cemail = encodeURIComponent(document.getElementById("cemail").value);
var postData = "username=" +username + "&password=" + password + "&cpassword=" + cpassword + "&email=" + email + "&cemail=" + cemail;
window.alert(postData);
if (email != cemail) {
window.alert("Emails do not match");
document.getElementById("response").innerHTML = "Emails do not match";
return false;
}
if (password != cpassword) {
window.alert("Passwords do not match");
document.getElementById("response").innerHTML = "Passwords do not match";
return false;
}
if (email == "" || email == null) {
window.alert("Email is blank");
document.getElementById("response").innerHTML = "Email cannot be blank";
return false;
}
if (password == "" || password == null) {
window.alert("Password is blank");
document.getElementById("response").innerHTML = "Password cannot be blank";
return false;
}
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var response=xmlhttp.responseText;
window.alert("Response recieved: " + response);
if (response == "New record created successfully") {
window.alert("Registration successful");
document.getElementById("response").innerHTML = "Registration successful!";
} else {
window.alert("Something went wrong... :(");
document.getElementById("response").innerHTML = "Something went wrong... :(";
}
}
}
xmlhttp.open("POST", "./handleRegistration.php", true);
window.alert("xmlhttp open");
xmlhttp.send(postData);
window.alert("POSTED");
return false;
}
</script>
<form name="heliosRegister" onsubmit="return validateForm()" method="POST">
Username:<br>
<input id="username" type="text" name="username" required>
<br><br>
Passsword:<br>
<input id="password" type="password" name="password" required>
<br><br>
Confirm Passsword:<br>
<input id="cpassword" type="password" name="cpassword" required>
<br><br>
Email:<br>
<input id="email" type="text" name="email" required>
<br><br>
Confirm Email:<br>
<input id="cemail" type="text" name="cemail" required>
<br><br>
<input type="submit" value="Register"> <p id="response"></p>
</form>
EDIT 2:
Problem solved, forgot to add the header information when sending the POST.

Answer 1

The problem was that I forgot to add the header info before POSTing:
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", postData.length);
xmlhttp.setRequestHeader("Connection", "close");

Answer 2

replace
var username = encodeURIComponent(document.getElementById("username").value);
var password = encodeURIComponent(document.getElementById("password").value);
var cpassword = encodeURIComponent(document.getElementById("cpassword").value);
var email = encodeURIComponent(document.getElementById("email").value);
var cemail = encodeURIComponent(document.getElementById("cemail").value);
var postData = "username=" +username + "&password=" + password + "&cpassword=" + cpassword + "&email=" + email + "&cemail=" + cemail;
with
var fd=new FormData();
fd.append("username",document.getElementById("username").value);
fd.append("password",document.getElementById("password").value);
fd.append("cpassword",document.getElementById("cpassword").value);
fd.append("email",document.getElementById("email").value);
fd.append("cemail",document.getElementById("cemail").value);
then use
xmlhttp.send(fd);
and i think it should work.
btw, $cpassword = $_POST['cpassword'];
should have given you an obvious error! (Undefined index),
while developing, use this code! much easier to spot several types of errors during development:
error_reporting(E_ALL);
function exception_error_handler($errno, $errstr, $errfile, $errline ) {
if (!(error_reporting() & $errno)) {
// This error code is not included in error_reporting
return;
}
throw new ErrorException($errstr, 0, $errno, $errfile, $errline);
}
set_error_handler("exception_error_handler");