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

Last Reply 23 days ago By pandeyism

Posted 24 days 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 23 days ago Modified on 23 days 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