Cannot pass variables between javascript function and ajax in django project

Question

This is a proper noob question it would seem, so apologies, but I can't seem to solve it so I'm reaching out for some assistance.

I have a function in my .js file that interacts with the Google Places library to autocomplete a field in a form. I then have an ajax function that runs when you click the submit button which creates variables in the django session. The data of interest to me is lat and long.

However, for some reason, I can't seem to get the data to pass from one to the other. I know the ajax function is working because if I type in fixed values they propagate through to django, but I can't seem to get it to update dynamically.

const csrf = document.getElementsByName('csrfmiddlewaretoken');
var lat;
var lng;

function autocomplete_location() {
    let defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(49.6331, -11.7247),
        new google.maps.LatLng(59.4850, 1.5906));

    let input = document.getElementById('id_your_location');
    let options = {
        bounds: defaultBounds,
        types: ["address"],
        fields: ["name", "geometry"],
    };

    let autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.addListener('place_changed', function() {

        // Get place info
        let place = autocomplete.getPlace();

        // Do whatever with the value!
        lat = place.geometry.location.lat()
        lng = place.geometry.location.lng()

        console.log(lat)
        console.log(lng)
    })
}


$(document).ready(function (){
    $(".btn").click(function (){
        $.ajax({
                url: '',
                type: 'POST',
                data: {
                    'csrfmiddlewaretoken': csrf[0].value,
                    'lat': lat,
                    'long': lng,
                },
                success: function (response) {
                    console.log(response)
                    window.location.replace('/new_path/')
                },
                error: function (error) {
                    console.log(error)

                }
        })
    })
})

UPDATE -----------------------------------------------------------

I have managed to get this working. I have moved the ajax call into the autocomplete function, but it only works when I click the submit button, it does not work when I press the enter key, so I need to brush up on my JS and ajax to solve that problem.

const csrf = document.getElementsByName('csrfmiddlewaretoken');

function autocomplete_location() {
    let defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(49.6331, -11.7247),
        new google.maps.LatLng(59.4850, 1.5906));

    let input = document.getElementById('id_your_location');
    let options = {
        bounds: defaultBounds,
        types: ["address"],
        fields: ["name", "geometry"],
    };

    let autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.addListener('place_changed', function() {

        // Get place info
        let place = autocomplete.getPlace();

        // Do whatever with the value!
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

        console.log(lat)
        console.log(lng)

        $("form").submit(function (){
            $.ajax({
                    url: '',
                    type: 'POST',
                    data: {
                        'csrfmiddlewaretoken': csrf[0].value,
                        'lat': lat,
                        'long': lng,
                    },
                    success: function (response) {
                        console.log(response)
                        // this is not good. But I couldn't find a better way to redirect
                        // window.location.replace('/coach/')
                    },
                    error: function (error) {
                        console.log(error)

                    }
            })
        })
    })
}

Answer 1

where do you call autocomplete_location() ? try passing lat and long in that function as parameters e.g. autocomplete_location(lat, long)