Validate Google Autocomplete address on TextBox Tab Key press using JavaScript and jQuery

Last Reply 3 months ago By pandeyism

Posted 3 months ago

hello,

 this code works fine the only problem is when user press tab on any row of google api it does not select that row i want when user press tab on any row of google adddress that address select please advice

<script type="text/javascript"> 
    $(function () {
        var textbox1 = $(this).find('[id*=txtfrom]');
        var textbox2 = $(this).find('[id*=txtto]');
        ApplyAutoComplete(textbox1);
        ApplyAutoComplete(textbox2);
    });
    function ApplyAutoComplete(input) {
        google.maps.event.addDomListener(window, 'load', function () {
            var places;
            for (var i = 0; i < input.length; i++) {
                var options = { types: ['(regions)'] };
                places = new google.maps.places.Autocomplete(input[i], options);
            }
            google.maps.event.addListener(places, 'place_changed', function () {
                isPlaceChanged = true;
                var place = places.getPlace();
                var address = place.formatted_address;
                var mesg = "Address: " + address;
            });
        });
    }
    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function initialize(textBox) {
        var input = textBox;
        var options = {
            types: ['(regions)']
            // Uncomment if restrict for Country.
            //, componentRestrictions: { country: 'in' }
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    }

    google.maps.event.addDomListener(window, 'load', function () {
        initialize(document.getElementById('<%=txtfrom.ClientID%>'));
        initialize(document.getElementById('<%=txtto.ClientID%>'));

        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    })
    $(function () {
        $('#<%= txtfrom.ClientID %>').keydown(function () {
            isPlaceChanged = false;
        });

        $('#<%= txtfrom.ClientID %>').blur(function () {
            if (!isPlaceChanged) {
                <%-- $('#<%= TextBox1.ClientID %>').val('');--%>


                var valName = document.getElementById("<%=RequiredFieldValidator3.ClientID%>");
                ValidatorEnable(valName, $('#<%= txtfrom.ClientID %>').val(''));
                //alert("Please Enter valid location");
            }
            else {
                a<%--lert($('#<%= TextBox1.ClientID %>').val());--%>

                var valName = document.getElementById("<%=RequiredFieldValidator3.ClientID%>");
                ValidatorEnable(valName, $('#<%= txtfrom.ClientID %>').val(''));
            }
        });
    });

</script>

 

Posted 3 months ago Modified on 3 months ago

Hi nauna,

Refer below sample.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_Key"></script>
    <script type="text/javascript">
        var fromAddress;
        var toAddress;
        $(function () {
            var textbox1 = $(this).find('[id*=txtfrom]');
            var textbox2 = $(this).find('[id*=txtto]');
            ApplyAutoComplete(textbox1);
            ApplyAutoComplete(textbox2);
            $(textbox1).blur(function () {
                var address = $(this).val();
                if (address == fromAddress) {
                    $('[id*=lblFrom]').hide();
                } else {
                    $('[id*=lblFrom]').show();
                }
            });
            $(textbox2).blur(function () {
                var address = $(this).val();
                if (address == toAddress) {
                    $('[id*=lblTo]').hide();
                } else {
                    $('[id*=lblTo]').show();
                }
            });
        });
        function ApplyAutoComplete(input) {
            google.maps.event.addDomListener(window, 'load', function () {
                var places;
                for (var i = 0; i < input.length; i++) {
                    var options = { types: ['(regions)'] };
                    places = new google.maps.places.Autocomplete(input[i], options);
                }
                google.maps.event.addListener(places, 'place_changed', function () {
                    if ($(input)[0].id == $('#<%=txtfrom.ClientID%>')[0].id) {
                        fromAddress = places.getPlace().formatted_address;
                        $('[id*=txtfrom]').val(fromAddress);
                        $('[id*=txtfrom]').trigger("blur");
                    } else if ($(input)[0].id == $('#<%=txtto.ClientID%>')[0].id) {
                        toAddress = places.getPlace().formatted_address;
                        $('[id*=txtto]').val(toAddress);
                        $('[id*=txtto]').trigger("blur");
                    }
                });
            });
        };
    </script>
    <div class="form-group col-md-2 padding2">
        From :
        <asp:TextBox ID="txtfrom" runat="server"></asp:TextBox>
        <span id="lblFrom" style="display: none; color: Red;">Select valid origin from address list</span>
    </div>
    <div class="form-group col-md-2 padding2">
        To :
        <asp:TextBox ID="txtto" runat="server"></asp:TextBox>
        <span id="lblTo" style="display: none; color: Red;">Select valid destination from address list</span>
    </div>
</asp:Content>

Screenshot