Display error message in ASP.Net Label instead SPAN using jQuery and JavaScript

Last Reply one month ago By dharmendr

Posted one month ago

hello,

i have this google api code it works fine

the only problem is coming that when user select any address from google auto complete <span> validation flashes then hide

instead of flashed error in span i want it flash it label

<div>
    <style>
        .pac-container
        {
            z-index: 1060 !important;
        }          
            
        .pac-container:after
        {
            content: none !important;
        }
    </style>
    <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");
                }
 
            <%--   var place = places.getPlace();
                var lat = place.geometry.location.lat();
                var lng = place.geometry.location.lng();
                //alert("Latitude is " + lat + "\n" + "longitude is " + lng)
               
 
               
                $('#<%=lblorigin_longitude.ClientID%>').html(lat)
                $('#<%=lblorigin_longitude.ClientID%>').html(lat)
 
                
                $('#<%=lbldestination_longitude.ClientID%>').html(lat)
                $('#<%=lbldestination_latitude.ClientID%>').html(lat)--%> 
                //document.getElementById('lblorigin_longitude').innerHTML = lng.val;
                //document.getElementById('lblorigin_latitude').innerHTML = lat.val; 
            });
        });
    };
    </script>
    <%-- //----------------- Timer page scroll  start-----------------%>
    <%--   <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(beginRequest);
 
        function beginRequest() {
            prm._scrollPosition = null;
        }
    </script>--%>
    <%--  //----------------- Timer page scroll  end----------------%>
    <div class="form-group col-md-2 padding2">
        Origin
        <asp:TextBox ID="txtfrom" runat="server" onchange="UploadFile()"></asp:TextBox>
        <asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation"
            Visible="false"></asp:Label>
        <span id="lblFrom" style="display: none; color: Red;">Select a valid origin city/municipality</span>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select a valid origin city/municipality"
            CssClass="validation" ControlToValidate="txtfrom" Display="Dynamic"></asp:RequiredFieldValidator>
    </div>
    <div class="form-group col-md-2 padding2">
        <div runat="server" id="destination">
            Destination
            <asp:TextBox ID="txtto" runat="server" onchange="UploadFile()"></asp:TextBox>
            <span id="lblTo" style="display: none; color: Red;">Select a valid destination city/municipality</span>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Select a valid destination city/municipality"
                CssClass="validation" ControlToValidate="txtto" Display="Dynamic"></asp:RequiredFieldValidator>
            <%--///calculate distance between origin and destination thru timer--%>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
                    <asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="display: none" />
                    <%--<asp:Timer ID="timer" runat="server" Interval="1000">
                    </asp:Timer>--%>
                    <br />
                    <asp:Label ID="lblorigin_longitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lblorigin_latitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lbldestination_longitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lbldestination_latitude" runat="server" Text="" Visible="false"></asp:Label><br />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    <script type="text/javascript">
        function UploadFile() {
            document.getElementById("<%=Button1.ClientID %>").click();
            if ($('#<%= txtto.ClientID %>').val() != '') {
                document.getElementById("<%=RequiredFieldValidator4.ClientID%>").val('');
            }

            if ($('#<%= txtfrom.ClientID %>').val() != '') {
                document.getElementById("<%=RequiredFieldValidator3.ClientID%>").val('');
            }
        }
    </script>
</div>

 

Posted one month ago

Hi nauna,

Check below code.

HTML

<div>
    <script type="text/javascript" src="https://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>
    <style type="text/css">
        .pac-container
        {
            z-index: 1060 !important;
        }
        .pac-container:after
        {
            content: none !important;
        }
    </style>
    <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>
    <%--  //----------------- Timer page scroll  end----------------%>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <div class="form-group col-md-2 padding2">
        Origin
        <asp:TextBox ID="txtfrom" runat="server" onchange="UploadFile()"></asp:TextBox>
        <asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation"
            Visible="false"></asp:Label>
        <%--<span id="lblFrom" style="display: none; color: Red;">Select a valid origin city/municipality</span>--%>
        <asp:Label ID="lblFrom" Style="display: none; color: Red;" runat="server" Text="Select a valid origin city/municipality" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select a valid origin city/municipality"
            CssClass="validation" ControlToValidate="txtfrom" Display="Dynamic"></asp:RequiredFieldValidator>
    </div>
    <div class="form-group col-md-2 padding2">
        <div runat="server" id="destination">
            Destination
            <asp:TextBox ID="txtto" runat="server" onchange="UploadFile()"></asp:TextBox>
            <%--<span id="lblTo" style="display: none; color: Red;">Select a valid destination city/municipality</span>--%>
            <asp:Label ID="lblTo" Style="display: none; color: Red;" runat="server" Text="Select a valid destination city/municipality" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Select a valid destination city/municipality"
                CssClass="validation" ControlToValidate="txtto" Display="Dynamic"></asp:RequiredFieldValidator>
            <%--///calculate distance between origin and destination thru timer--%>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
                    <asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="display: none" />
                    <%--<asp:Timer ID="timer" runat="server" Interval="1000">
                </asp:Timer>--%>
                    <br />
                    <asp:Label ID="lblorigin_longitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lblorigin_latitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lbldestination_longitude" runat="server" Text="" Visible="false"></asp:Label><br />
                    <asp:Label ID="lbldestination_latitude" runat="server" Text="" Visible="false"></asp:Label><br />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    <script type="text/javascript">
        function UploadFile() {
            document.getElementById("<%=Button1.ClientID %>").click();
            if ($('#<%= txtto.ClientID %>').val() != '') {
                document.getElementById("<%=RequiredFieldValidator4.ClientID%>").innerHTML = '';
            }

            if ($('#<%= txtfrom.ClientID %>').val() != '') {
                document.getElementById("<%=RequiredFieldValidator3.ClientID%>").innerHTML = '';
            }
        }
    </script>
</div>