I am in the process of creating a HotSpot that offers internet access once users input their email addresses.
To make this function properly, I need to execute two separate AJAX posts:
- The first one sends hidden username and password details to the router for granting internet access.
- The second post sends the entered email address to the database, which requires internet connectivity.
A potential issue arises when setting async to false instead of true, as it triggers a warning message.*
xhr.open('POST', 'http://router/login', false);Warning*: Synchronous XMLHttpRequest on the main thread has been deprecated due to its negative impact on user experience. For more information, visit .
In conclusion, I believe I should implement two asynchronous AJAX POST requests (to avoid warnings), with the second request (email) sent only after the completion of the first request (username and password).
Currently, I am facing an issue where sometimes the email gets added to the database successfully while other times it does not. Additionally, I do not want to incorporate a lengthy setTimeout delay for user redirection.
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script type="text/javascript">
document.getElementById("submit_ok").addEventListener("click", SendAjax);
function SendAjax() {
var email = document.getElementById("email").value;
console.log(email);
// Check if field is empty
if (email=="") {
alert("Please enter your email.");
}
// Implement AJAX code to submit form
else{
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://router/login', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
xhr.send("popup=true&username=HSuser&password=SimpleUserPassword");
{
setTimeout(function(){
var xhr2= new XMLHttpRequest();
xhr2.open('POST', 'http://server/insertDB.php', true);
xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
var useremail = document.getElementById("email").value;
xhr2.send("Email="+encodeURIComponent(useremail));
setTimeout(function (){
location.href="http://server/redirected.html";}
), 1000
}, 2000);
}
}
}
An edited snippet has been posted above to provide a possible solution. However, it is currently not functioning as expected. Posting this for further discussion regarding potential issues.
document.getElementById("submit_ok").addEventListener("click", SendAjax);
function SendAjax() {
var email = document.getElementById("email").value;
console.log(email);
// Check if fields are empty
if (email=="") {
alert("Please enter your email.");
}
// AJAX code to submit form
else{
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://router/login', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
xhr.send("popup=true&username=HSuser&password=SimpleUserPassword");
xhr.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
var xhr2= new XMLHttpRequest();
xhr2.open('POST', 'http://server/insertDB.php', true);
xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
var useremail = document.getElementById("email").value;
xhr2.send("Email="+encodeURIComponent(useremail));
xhr2.onreadystatechange = function () {
var DONEDONE = this.DONEDONE || 4;
if (this.readyState === DONEDONE){
location.href="http://server/redirected.html";
}
}
}
}
}
}
After testing this alternative, the results indicate that there are still shortcomings. While the computer eventually gains internet access (around 8 seconds), the "user" is redirected immediately, and the email is not consistently stored in the database even after making revisions.
I appreciate the assistance provided thus far. Thank you to everyone who has contributed.