Before submitting a form onclick="return check_internet_conn()" is called to see if there is an internet connection, (I will be doing this on a mobile device, xampp will be on mobile device too. My testing happens on windows 7), this will request check_internet_connection.php file to check internet connection (prefer not to check to see if an image exists on some server to check for internet connectivity via javascript). check_internet_connection.php works fine but I can never get javascript ajax, jQuery ajax, nor javascript fetch(), return the file content.
<div class="container">
<form action="processQuestion.php" method="post">
<div class="form-group">
<label for="question">Write your question here:</label>
<textarea class="form-control" rows="7" id="question_txt" name="question"></textarea>
</div>
<button type="submit" class="btn btn-primary" onclick="return check_internet_conn()">Submit Question</button>
</form>
<p id="submit_error_no_internet" class="warning"></p>
</div>
Here is the PHP file
<?PHP
try {
@ $connected = fsockopen("www.example.com", 80);
if ($connected) {
fclose($connected);
echo "Connected";
}
}
catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
finally {
echo "Not Connected!";
}
?>
And here are the three different attempts at ajax and js fetch(), with debugging additions.
<script src="jquery/jquery-3.5.1.slim.min.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
<script>
function check_internet_conn() {
$.get("http://localhost/crud/check_internet_connection.php", function(data, status){
switch(data) {
case "Not Connected!":
document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
return false;
break;
case "ConnectedNot Connected!":
return true;
break;
default:
document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
}
});
}
function check_internet_conn() {
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
switch(myText) {
case "Not Connected!":
document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
return false;
break;
case "ConnectedNot Connected!":
return true;
break;
default:
document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
}
}
getText("http://localhost/crud/check_internet_connection.php");
}
function check_internet_conn() {
var myXmlhttp = new XMLHttpRequest();
myXmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("submit_error_no_internet").innerHTML = this.responseText;
switch(this.responseText) {
case "Not Connected!":
document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
return false;
break;
case "ConnectedNot Connected!":
return true;
break;
default:
document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
}
}
};
myXmlhttp.open("GET", "http://localhost/crud/check_internet_connection.php");
myXmlhttp.send();
document.getElementById("submit_error_no_internet").innerHTML = myXmlhttp.status + " " + myXmlhttp.readyState;
}
</script>
I have attempted debugging in Firefox and Chrome, without much success. No error messages.