How to Get Client IP Address using Javascript?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this blog, I will show you how we can get client machine ip address by using javascript code. We know that JavaScript works with third-party applications for fetch the IP addresses. This is the application services that will fetch the user ip address and also it simply returns it in three format, one is plain text, JSON, and JSONP format.

So ,now in this example, I will give you a easy and also a simply way to get user/client ip address in javascript. if you need to retrieve the client’s IP address by using JavaScript then we need to use just bellow example.

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>how to get client ip address using javascript? - CodingsPoint.com</title>
</head>
<body>
    <h1>CodingsPoint.com</h1> 
    <h3>IP Address of user is:</h3> 
    <p style="color: red;"><strong id="ip"></strong></p> 
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">

        $.getJSON("https://api.ipify.org?format=json", function(data) { 

            $("#ip").html(data.ip); 
            
        }) 

    </script> 
</body>
</html>

Example 2

<!DOCTYPE html>
<html>
<head>
    <title>how to get client ip address using javascript? - CodingsPoint.com</title>
</head>
<body>
    <h1>CodingsPoint.com</h1> 
    <h3>IP Address of user is:</h3> 
    <p style="color: red;"><strong id="ip"></strong></p> 
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"> 

        $.get("https://ipinfo.io", function(response) { 

            $('#ip').html(response.ip);

        }, "json") 

    </script> 
</body>
</html>

Example 3

<!DOCTYPE html>
<html>
<head>
    <title>how to get client ip address using javascript? - CodingsPoint.com</title>
</head>
<body>
    <h1>CodingsPoint.com</h1> 
    <h3>IP Address of user is:</h3> 
    <p style="color: red;"><strong id="ip"></strong></p> 
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">

        $.get("http://gd.geobytes.com/GetCityDetails?callback=?", function(response) { 

            $('#ip').html(response.geobytesipaddress);

        }, "json") 

    </script>
</body>
</html>

Read Also : PHP AngularJS CRUD with Search and Pagination Example From Scratch

thank you for read .I hope it can help you.Also you can follow us on Facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →