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.
Advertisement
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.