jquery: making button.click & json call work together but keeping them separated

Question

I have a contact form that encrypts the form message:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<form name="form_contact" method="post" action="/cgi/formmail.pl">
    // other input fields here

    <textarea name="message" id="message" required></textarea>

    <button id="sendbutton" type="submit">Send</button>
</form>

The following Javascript script works and does things with the form message when people click on the Send-button:

$(document).ready(function() {
    $("button[id$='sendbutton']").click(function(){

    //check if the message has already been encrypted or is empty
      var i = document.form_contact.message.value.indexOf('-----BEGIN PGP MESSAGE-----');
      if((i >= 0) || (document.form_contact.message.value === ''))
        {
            document.form_contact.submit(); return;
        }
      else
        {
            document.form_contact.message.value='\n\n'+ document.form_contact.message.value + "\n\n\n\n\n\n\n\n" + "--------------------------" + "\n"

            if (typeof(navigator.language) != undefined && typeof(navigator.language) != null) {
                document.form_contact.message.value=document.form_contact.message.value + '\n'+ "Language: " + (navigator.language);}
            else if (typeof(navigator.browserLanguage) != undefined && typeof(navigator.browserLanguage) != null) {
                document.form_contact.message.value=document.form_contact.message.value + '\n'+ "Language: " + (navigator.browserLanguage); }

            // and here's where the geoip service data should be appended to the form message 
            addGEOIPdata();

            //finally the resulting message text is encrypted
            document.form_contact.message.value='\n\n'+doEncrypt(keyid, keytyp, pubkey, document.form_contact.message.value);
        }
    });
}); 


function addGEOIPdata(){
        $.get('http://ipinfo.io', function(response)
        {            
            $("#message").val( $("#message").val() + "\n\n" + "IP: "+ response.ip  + "\n" + "Location: " + response.city + ", " + response.country);
        }, 'jsonp');
};

Well, it works except: it does not add the response from the Geoip service ipinfo.io to the form message before encrypting it.

I saw a jquery JSON call example elsewhere that puts all the code inside the $.get('http://ipinfo.io', function(response){...}) but that's not what I want.
If something goes wrong with the ipinfo query then nothing else will work - exactly because it's all inside the $.get('http://ipinfo.io', function(response){...}).

In other words: how can I make my button.click and my $.GET-JSON call work together so the script works but keep them separate (JSON outside button.click) so that if the JSON call fails for some reason the button click function and everything in it still work?

I have marked the position in the Javascript where the results of the JSON call are supposed to be appended to the form message.

Thank you for your help.

---

EDIT:

After 1bn hours of trial & error, I eventually stumbled across a way to make it work:

so I put the geoipinfo query into a separate script that gets the info when the page is loading.

$.getJSON("https://freegeoip.net/json/", function (location) {

var results = "\n\n" + "IP: "+ location.ip  + "\n" + "Location: " + location.city + ", " + location.region_name + ", " + location.country_name;

     window.$geoipinfo = results;
 });

And then in the other script I posted earlier, I add the variable $geoipinfo to the form message by

document.form_contact.message.value=document.form_contact.message.value + §geoipinfo;

It seems $geoipinfo is now a global variable and therefore I can use its contents outside the function and in other scripts.

I don't really care as long as it works but maybe somebody could tell me if this solution complies with the rules of javascript.

Answer 1

The jQuery API: http://api.jquery.com/jQuery.get/

specifies that you can put a handler in .always() and it will be called whether the get succeeds or fails.

$.get('http://ipinfo.io', , function(response)
    {            
        $("#message").val( $("#message").val() + "\n\n" + "IP: "+ response.ip  + "\n" + "Location: " + response.city + ", " + response.country);
    }, 'jsonp').always(function(){
        document.form_contact.message.value='\n\n'+doEncrypt(keyid, keytyp, pubkey, document.form_contact.message.value);
    });