Add Geolocation to contact in a form

Question

I'm creating a form in Sendinblue (email marketing platform) in such a way that when a lead fills the form to subscribe in a list, when he clicks the Submit button, the following Hidden fields are filled with this information based on the IP of the sender: IP, Country, Region, City and Zip Code. In that case, each contact in the Sendinblue platform will have its Location information associated, so it will be possible to send campaigns targetting specific contacts based on their location.

For that purpose, I created these 5 new attributes in Sendinblue: IPADDRESS, IPCOUNTRY, IPREGION, IPCITY, IPZIP (sorry for the capitals, it's how Sendinblue formats them). And then, I applied this code in the form (I simplified it for clarity purposes). Please, pay special attention to the onsubmit="" parameter that I added in the form:

<form id="sib-form" method="POST" data-type="subscription" onsubmit="guardarInfoGeo();">

    <input class="input " maxlength="200" type="text" id="NAME" name="NAME" autocomplete="off" placeholder="NAME" />
    <input class="input " type="text" id="EMAIL" name="EMAIL" autocomplete="off" placeholder="EMAIL" data-required="true" required />

    <input type="hidden" id="IPADDRESS" name="IPADDRESS" value="">
    <input type="hidden" id="IPCOUNTRY" name="IPCOUNTRY" value="">
    <input type="hidden" id="IPREGION" name="IPREGION" value="">
    <input type="hidden" id="IPCITY" name="IPCITY" value="">
    <input type="hidden" id="IPZIP" name="IPZIP" value="">

    <button form="sib-form" type="submit">
</form>

And this code for the scripts, which I place below the code of the form

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
function guardarInfoGeo() {
  $(document).ready(function() {
  $.getJSON('https://ipapi.co/json/', function(ipdata) {
    var IpAddress = ipdata.ip;
    var IpCountry = ipdata.country_name;
    var IpRegion = ipdata.region;
    var IpCity = ipdata.city;
    var IpZip = ipdata.postal;

    document.getElementById("IPADDRESS").value = IpAddress;    
    document.getElementById("IPCOUNTRY").value = IpCountry;
    document.getElementById("IPREGION").value = IpRegion;
    document.getElementById("IPCITY").value = IpCity;
    document.getElementById("IPZIP").value = IpZip;
  });
});

}
</script>

When I run the form, the form works in terms of subscribing the contact, but the 5 hidden fields are empty, none of them is populated with information. I tried different approaches, but nothing seem to work. Any ideas. Thank you very much for your help!!!