Pass DropDownList selected value from one UserControl to another using JavaScript in ASP.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

I am getting the selected value of the 'Third party Calander DDL' in Hidden Field using Javascript function UpdateProjectChanged(); ucVolume.ascx ---

USER CONTROL 2 ------------------------------------------

<asp:Label ID="lblStartDate" runat="server"></asp:Label>
<asp:Label ID="lblEndDate" runat="server"></asp:Label>

Requirement: ----------------

I want to pass the selected value of the 'Third party Calander DDL' to "ucVolume.ascx --- USER CONTROL 2" and display in Label.

Kindly let me know how to achieve it.

Optimize.aspx ----------------

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<AjaxControlToolkit:TabContainer ID="TabProduction" runat="server" CssClass="ajax_tab">
		
			<AjaxControlToolkit:TabPanel ID="pnlProduction" HeaderText="Production" runat="server">
				<HeaderTemplate>
					<asp:Label ID="Label2" runat="server" CssClass="ajax_tabHeader" Text="Production"></asp:Label>
				</HeaderTemplate>
				<ContentTemplate>
					
					<uc:ucProductionTab ID="ucProduction" runat="server" />
				</ContentTemplate>
			</AjaxControlToolkit:TabPanel>
			
			<AjaxControlToolkit:TabPanel ID="pnlVolume" HeaderText="Volume" runat="server">
				<HeaderTemplate>
					<asp:Label ID="Label1" runat="server" CssClass="ajax_tabHeader" Text="Volume"></asp:Label>
				</HeaderTemplate>
				<ContentTemplate>
					
					<uc:ucVolumeTab ID="ucVolume" runat="server" />
				</ContentTemplate>
			</AjaxControlToolkit:TabPanel>
			
			 <AjaxControlToolkit:TabPanel ID="pnlWell" HeaderText="Well" runat="server">
				<HeaderTemplate>
					<asp:Label ID="Label3" runat="server" CssClass="ajax_tabHeader" Text="Well"></asp:Label>
				</HeaderTemplate>
				<ContentTemplate>
				
					<uc:ucWellTab ID="ucWell" runat="server" />
				</ContentTemplate>
			</AjaxControlToolkit:TabPanel>
			
		</AjaxControlToolkit:TabContainer>
	</ContentTemplate>
</asp:UpdatePanel>

ucProduction.ascx ---

USER CONTROL 1 ---------------------------------------------

<script type="text/javascript">
    function UpdateProjectChanged() {
        debugger;
        //--- get the Evaluation Start Date and Finish Date in HiddenField on click of Next button (to pass it as parameter in 2nd tab)
        var startDate = document.getElementById('ContentPlaceHolder1_pageControl_ucCandidateSet_calStartDate_I');
        var endDate = document.getElementById('ContentPlaceHolder1_pageControl_ucCandidateSet_calEndDate_I');

        var hdStartDate = document.getElementById("<%=hdEvalStartDate.ClientID %>");
        var hdEndDate = document.getElementById("<%=hdEvalEndDate.ClientID %>");

        hdStartDate.value = startDate.value;
        hdEndDate.value = endDate.value;
        alert(hdStartDate.value + " , " + hdEndDate.value);
    }	
    function OnButtonClick() {
    }
</script>

<asp:HiddenField ID="hdEvalStartDate" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hdEvalEndDate" runat="server" ClientIDMode="Static" />

<table class="filterTable">
	<tr>
		<td>
			<table class="defaultTable">
				<tr>
					<td>
						<asp:Label runat="server" Text="Start Date"></asp:Label>
					</td>
					<td>&nbsp;:&nbsp;</td>
					<td>
						<!--Third party Calander DDL-->
						<SS:DateEdit ID="calStartDate" runat="server">  
							<ClientSideEvents DateChanged="UpdateProjectChanged" />
							<ValidationSettings SetFocusOnError="True" ValidateOnLeave="true" ValidationGroup="groupTabPersonal">
								<RequiredField IsRequired="True" ErrorText="Evaluation Start Date is required" />
							</ValidationSettings>
						</SS:DateEdit>                      
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label runat="server" Text="Finish Date"></asp:Label>
					</td>
					<td>&nbsp;:&nbsp;</td>
					<td>
						<!--Third party Calander DDL-->
						<SS:DateEdit ID="calEndDate" runat="server">
							<ValidationSettings SetFocusOnError="True" ValidateOnLeave="true" ValidationGroup="groupTabPersonal">
								<RequiredField IsRequired="True" ErrorText="Evaluation End Date is required" />
							</ValidationSettings>
						</SS:DateEdit>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

<hr id="gHr" runat="server" />
<table width="100%">
    <tr>
        <td style="float:right">    
            <dx:ASPxButton ID="btnNext" runat="server" Text="Next" ClientInstanceName="btnNextPersonal"
                AutoPostBack="false" ValidationGroup="groupTabPersonal">
                <ClientSideEvents Click="OnButtonClick" />
            </dx:ASPxButton>
        </td>                                                                             
    </tr>
</table>