CODEWITHSUNDEEP
javascriptjqueryautocomplete
django11
django11

Reputation: 811

How to get value from autocomplete input with jquery .val()?

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>

Upvotes: 0

Views: 2020

Answers (1)

django11
django11

Reputation: 811

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

$( "#anyInput" ).trigger("change");

Upvotes: 1

Related Questions