Access UserControl TextBox in ASPX Page using JavaScript in ASP.Net

Last Reply 16 days ago By pandeyism

Posted 16 days ago

i have this user control works fine, the only problem is when user is using user control 1 and type in address and not select address so javascript validation appears but it appears in both user control it should appear only to that user contorl which user is using currently

pls advice

when i add another instance of same user control like this

<%@  control language="C#" autoeventwireup="true" codebehind="GoogleAddressDifference.ascx.cs"
    inherits="EcheckCallV2.usercontrol.GoogleAddressDifference" %>
<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">
    <span class="none">Origin </span>
    <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">
        <span class="none">Destination </span>
        <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" />
                <br />
                <%--   <asp:HiddenField ID="lblorigin_longitude" runat="server"/>--%>
                <asp:Label ID="lblorigin_longitude" runat="server" Style="display: none"></asp:Label>
                <br />
                <asp:Label ID="lblorigin_latitude" runat="server" Style="display: none"></asp:Label>
                <%--      <asp:HiddenField ID="lblorigin_latitude" runat="server" />--%>
                <br />
                <%-- <asp:HiddenField ID="lbldestination_longitude" runat="server" />--%>
                <asp:Label ID="lbldestination_longitude" runat="server" Style="display: none"></asp:Label>
                <br />
                <asp:Label ID="lbldestination_latitude" runat="server" Style="display: none"></asp:Label>
                <%--  <asp:HiddenField ID="lbldestination_latitude" runat="server" />--%>
                <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>

 

<%@ Register Src="~/usercontrol/GoogleAddressDifference.ascx" TagPrefix="uc1" TagName="GoogleAddressDifference" %>
<uc1:GoogleAddressDifference runat="server" ID="GoogleAddressDifference" />

 

<uc1:GoogleAddressDifference runat="server" ID="GoogleAddressDifference1" />
Posted 16 days ago

Hi nauna,

How to access web user control in javascript for that refer below link-

You are not finding user control anywhere so how can you validate.

Get UserControl TextBox value in ASPX Page using JavaScript in ASP.Net