0

I can't get autocomplete input with jquery .val(), because .val() only returns input value which was typed by myself but not what was added by autocomplete.

jquery .val() only returns full value if make changes on other fields.

I use google maps autocomplete for address, and than I pass that address to google maps api to get distances between two addresses. Problem is that this "start = $('#id_rent_delivery_address').val()" only gets address part which is typed manually but not autocompleted.

Maybe you have any ideas how I could fix it?

My code:

<script>

    $(document).ready(function() {
        initAutocomplete();
    });

    var autocomplete, autocomplete2;

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('id_rent_withdraw_address')),
                {types: ['geocode']});


        autocomplete2 = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('id_rent_delivery_address')),
                {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.

    }

</script>





<script type="text/javascript">

$(document).on('change', '#rent-confirm-form', function() {

    var start = $('#id_rent_delivery_address').val();
    var end = $('#id_rent_withdraw_address').val();

    GetRoute(start, end);

});   

    function GetRoute(start, end) {
        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [start],
            destinations: [end],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;

                console.log(distance);
                console.log(duration);
                console.log(start);
                console.log(end);

            } else {
                console.log("Unable to find the distance via road.");
            }
        });
    }

</script>

1 Answer 1

1

Solved by myself. Just simulated form change with jquery trigger method.

$( "#anyInput" ).trigger("change");
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.