'Sending the User's Country and IP Hidden Input

I Have an HTML Form And I Want to Find Out the IP and Country When Users Submit the Form.

I Can See the User's Information, But How Can I Send It Hidden?

What Do I Need To Add To My Form Or Javascript Code?

<div id="ip"></div>
<div id="address"></div>
<hr/>Full response: <pre id="details"></pre>

        <script>$.get("http://ipinfo.io", function (response) {
            $("#ip").html("IP: " + response.ip);
            $("#address").html("Location: " + response.city + ", " + response.region);
            $("#details").html(JSON.stringify(response, null, 4));
        }, "jsonp");</script>

Example: For example, This is How I Can Get UTM Information. In the Same Way, I Want to be Able to Get the IP and Country Like This. I Use Webhook in My Post.

<input type="hidden" name="utm_source" value="">
                                    <input type="hidden" name="utm_medium" value="">
                                    <input type="hidden" name="utm_campaign" value="">

    <script>var queryForm=function(e){var t=!(!e||!e.reset)&&e.reset,n=window.location.toString().split("?");if(n.length>1){var o=n[1].split("&");for(s in o){var r=o[s].split("=");(t||null===sessionStorage.getItem(r[0]))&&sessionStorage.setItem(r[0],decodeURIComponent(r[1]))}}for(var i=document.querySelectorAll("input[type=hidden], input[type=text]"),s=0;s<i.length;s++){var a=sessionStorage.getItem(i[s].name);a&&(document.getElementsByName(i[s].name)[0].value=a)}};setTimeout(function(){queryForm()},3e3);</script>
javascripthtml


Solution 1:[1]

I assume that you have successfully received the data (ip, lcoation). In your JS you write the values into your HTML (id="ip", id="address"). Now you can collect the data again when sending it to your server.

const ip = document.getElementById('ip');
const address = document.getElementById('address');

const data = { ip: ip, address: address };

fetch('https://youDomain.tld/profile', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

And if you do it hidden means that you have to add some style to hide the div tags with the ip=ip and id=address. Inline style <div id="ip" style="display:none;"></div>

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 Maik Lowrey

Related Questions