'Check the internet connection for each and every time of submission in JavaScript

Is there any possible way to check the internet connection for each and every time of submission in JavaScript?

Solution 1:^[1]

Navigator.online is a method that checks whether there is a connection or no. However this does not check "Internet connection" as it will always output true if you are connected to a network with or without internet.

here is a snippet

function findIp() {
  var findIP = new Promise(r => {
    var w = window,
      a = new (w.RTCPeerConnection ||
        w.mozRTCPeerConnection ||
        w.webkitRTCPeerConnection)({ iceServers: [] }),
      b = () => {};
    a.createDataChannel("");
    a.createOffer(c => a.setLocalDescription(c, b, b), b);
    a.onicecandidate = c => {
      try {
        c.candidate.candidate
          .match(
            /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
          )
          .forEach(r);
      } catch (e) {}
    };
  });
  findIP
    .then(ip => $("#ipchk").html("your IP: " + ip))
    .catch(e => console.error(e));
}

//gets the network status from the browser navigator api once page is loaded
function chkstatus() {
  if (navigator.onLine) {
    console.log("online");
    $("#netchk").html("online");
    $(".dot").removeClass("offline");
    $(".dot").addClass("online");
    //print ip if there is connection
    findIp();
  } else {
    console.log("offline");
    $("#netchk").html("offline");
    $(".dot").removeClass("online");
    $(".dot").addClass("offline");
  }
}

//check status every 5 seconds
setInterval(chkstatus, 5000);

$(document).ready(function() {
  chkstatus();

  //event listener for changes in the netwrok
  window.addEventListener("offline", function(e) {
    $("#netchk").html("offline");
    $(".dot").removeClass("online");
    $(".dot").addClass("offline");
    $("#ipchk").html("your ip: ");
  });

  window.addEventListener("online", function(e) {
    console.log("online");
    $("#netchk").html("online");
    $(".dot").removeClass("offline");
    $(".dot").addClass("online");
    findIp();
  });
});

#main-content {
  height: 100vh;
  display: flex;
  align-items: center;
}
#content {
  text-align: center;
  background-image: linear-gradient(to left, #4776e6, #8e54e9);
  padding: 20px;
  border-radius: 30px;
  color: #fafafa;
  margin: 0 auto;
  font-size: 20px;
  font-family: "Courier New", Courier, monospace;
  text-transform: capitalize;
  box-shadow: 0 10px 20px rgba(41, 72, 255, 0.19),
    0 6px 6px rgba(41, 72, 255, 0.23);
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
}
.online {
  background-color: greenyellow;
}
.offline {
  background-color: #f44336;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Network Status</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div class="layout">
      <div id="main-content">
        <div id="content">
          <div><span id="netchk"></span> <span class="dot"></span></div>
          <hr />
          <div id="ipchk"></div>
        </div>
      </div>
    </div>
  </body>
</html>

try connecting through your phone hotspot and disconnecting the internet/4G. you will notice it still shows online.

this code check your network status and ip every 5 secs, here is a link to the github REPO.

The best way to check for internet connection for now is through an ajax request.

Solution 2:^[2]

U can do this:

// When the internet is off
addEventListener('offline', function(){
  alert("No Internet");
});

 // When the internet is on
addEventListener('online', function(){
  alert("Back online");
});

Or you can do that:

  

alert(/*It would either say true or false*/ navigator.onLine? /* On true: */"Online":/*On false:*/"Offline");

Solution 3:^[3]

var x = confirm("Are you sure you want to submit?");
if(x){
    if(navigator.onLine == true) {
        return true;
    } else {
        alert('Internet connection is lost');
        return false; 
    }
}
else {
    return false;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Raed Salah
Solution 2
Solution 3

'Check the internet connection for each and every time of submission in JavaScript

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]