Why is php POST array empty for me in one instance and populated in another, both using XHR POST?

I am trying to write code that will check if username is already used, and I wrote some test code where my php $_POST array was populated. However, I modified the test code slightly for the ‘production’ code I am developing, and my $_POST array is empty. My first set of code, that is working, html file is

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Testing XMLHttpRequest</title>
   <meta charset="utf-8">
</head>
<body>
   <header>
      <h1>Testing XMLHttpRequest</h1>
   </header>
   <main>
      <form name="newUser">
         <label for="username">Username:</label>
            <input type="text" id="username" name="username">
         <p id="serverResponse"></p>
         <label for="password">Password:</label>
            <input type="password" name="password">
         </br>
         <label for="confirm">Retype Password:</label>
            <input type="password" name="confirm">
      </form>
   </main>
   <script src="index.js"></script>
</body>
</html>

First set of code javascript file

(function () {
   let usernameInput = document.querySelector("#username");
   let serverResponse = document.querySelector("#serverResponse");
   
   usernameInput.addEventListener("blur", function (event) {
      let username = event.target.value;
      
      if (username !== "") {
         let request = new XMLHttpRequest();
         request.open("POST",'validator.php',true);
         request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         
         request.onreadystatechange = function() {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
               serverResponse.innerHTML = this.responseText;
            }
         }
         
         request.send(`username=${username}`);
      }
      else {
         serverResponse.innerHTML = "";
      }
   });
}());

First set of code php file

<?php
   $username = $_POST['username'];
   echo $username;
?>

My modified code that does not work is below. The html file is

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Lunch Decider - New User Registration</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header>
      <h1>Lunch Decider</h1>
   </header>
   <nav>
      <ul>
         <li><a href="index.html">Home/Cancel</a></li>
      </ul>
   </nav>
   <main>
      <form action="newUser.php" method="POST" name="newUser">
         <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <button type="button" id="checkAvailabilityButton">Check Availability</button>
         <p id="availabilityResponse"></p>
         <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
         </br>
         <label for="checkPassword">Repeat Password:</label>
            <input type="password" id="checkPassword" name="checkPassword" required>
         </br>
         <button type="submit">Submit</button>
         <button type="reset">Reset</button>
      </form>
   </main>
   <script src="newUser.js"></script>
</body>
</html>

The javascript file for the code that does not work is

(function () {
   let checkAvailabilityButton = document.querySelector("#checkAvailabilityButton");
   let username = document.querySelector("#username");
   let availabilityResponse = document.querySelector("#availabilityResponse");
   
   checkAvailabilityButton.addEventListener("click", function(event) {
      if (username.value === "") {
         alert("You must first enter a username.");
      }
      else {
         let xhr = new XMLHttpRequest();
         xhr.open("POST","checkAvailability.php",true);
         xhr.setRequestHeader("Content-type","application/x-www-url-formencoded");
         
         xhr.onreadystatechange = function() {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
               availabilityResponse.innerHTML = this.responseText;
            }
         };
         
         xhr.send(`username=${username.value}`);
      }
   });
   
}());

and finally my php code that does not work is

<?php
   $username = $_POST['username'];
   echo $username;
?>

Not sure where I have gone wrong in the second set of code. I have tried putting my data in a FormData object and passing that to the XHR.send() method. I realize I have switched in my first set of code from a ‘blur’ event on the input I am interested in directly, to my second set of code where my main event is clicking on a ‘checkAvailability’ button, but I can’t see where that would make my $_POST array not accept the sent value. In both cases I can see where in the request there is username=nameEntryFromInputTextBox. Please take a look and advise.

Answer

I had a typo, in my code that was not working I had Content-type set to x-www-url-formencoded. It should have been x-www-form-urlencoded.

Advertisement

Answer