0

I have a form that I am using that gets a signature and I wanted it to also grab the user's location in the background as an extra layer of assurance the signature is genuine (work is done on-site).

I am not very familiar with Javascript, and have been trying to get this working. I know the issue is (probably) with the scope of the variable and the parent function isn't getting the correct data passed. I even assigned static values to lat and long for testing and still the values are blank when I pass them to the parent function (send).

I've tried a number of things, such as trying to declare the variables as global, un-nesting the function and making it it's own; but I think my own lack of understanding of Javascript is preventing me from troubleshooting this effectively. If anyone could point out my error (or point me in the right direction) I'd really appreciate it, I've been pulling my hair out over this and I know it's fundamentally simple. 

  send : function(){

    var lat = "";
    var long = "";

    //if (empty == false){

    navigator.geolocation.getCurrentPosition(function(position) {
                var coords = position.coords;
                lat = coords.latitude;
                long = coords.longitude;
             
             lat = '123';
             long = '1234';
             //return lat;
             //return long;
       });


    //var lat = position.coords.latitude;
    //var long = position.coords.longitude;

    var canvas = document.getElementById("newSignature");
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;
    //var replyemail = document.getElementById('replyemail').value;
    var workorder = document.getElementById('workorder').value;
    var printedname = document.getElementById('printedname').value;
    var managertype = document.getElementById('managertype').value;
    var dataform = document.createElement("form");
    document.body.appendChild(dataform);
    dataform.setAttribute("action","signsend/upload_file.php");
    dataform.setAttribute("enctype","multipart/form-data");
    dataform.setAttribute("method","POST");
    dataform.setAttribute("target","_self");
    dataform.innerHTML = '<input type="text" name="image" value="' + dataURL + '"/>' + '<input type="text" name="lat" value="' + lat + '"/>' + '<input type="text" name="long" value="' + long + '"/>' + '<input type="text" name="printedname" value="' + printedname + '"/>' + '<input type="text" name="managertype" value="' + managertype + '"/>' + '<input type="text" name="workorder" value="' + workorder + '"/>' +  '"/>'+'<input type="submit" value="Click me" />';
    dataform.submit();

    
    

    }
Jesse Pardue
  • 180
  • 1
  • 1
  • 9
  • It's not scope, it's *timing*. `getCurrentPosition` *asynchronously* resolves *sometime later.* – deceze Sep 21 '19 at 15:58
  • Thanks for the comment, I will look into that. So for the purpose of troubleshooting, the scopes *are* set correctly (though I know it's not good practice to declare variables globally), and *when* I fix the issue with the timing, it will work, and the variables lat and long will be referenced correctly? Thanks. – Jesse Pardue Sep 21 '19 at 16:42
  • Well, yeah, generally so. But the solution is to basically move all the code that depends on `lat` and `long` *into the same callback function of `getCurrentPosition`.* Then that code can execute *when* those values are available. As such, the point about scope becomes moot. – deceze Sep 21 '19 at 16:57

0 Answers0