How to get web user control's text box value using javascript

StackOverflow https://stackoverflow.com/questions/17313628

Question

I am developing an calendar user control using Ajax calendar extender.

User control code

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" ClientIDMode="Predictable" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<link rel="stylesheet" href="GridViewCSSThemes/YahooGridView.css" type="text/css" media="screen" />
<div style="position:relative;border:none;">
    <asp:TextBox ID="txtDate" MaxLength="10" ToolTip="DD/MM/YYYY" Width="100"
        CssClass="tb10" runat="server">
    </asp:TextBox>
    <asp:ImageButton ImageUrl="~/GridViewCSSThemes/Images/Calendar_scheduleHS.png" ID="imgCalender" runat="Server"
        BorderWidth="0" ImageAlign="absmiddle" />
    <ajaxControl:CalendarExtender ID="AjaxCalenderCtrl" runat="server" Format="dd/MM/yyyy" PopupPosition ="TopLeft" 
        TargetControlID="txtDate" CssClass="red" FirstDayOfWeek="Sunday" PopupButtonID="imgCalender">
    </ajaxControl:CalendarExtender>
    <ajaxControl:TextBoxWatermarkExtender WatermarkCssClass="tb10" ID="txtWaterMarkDate"
        runat="server" WatermarkText="DD/MM/YYYY" TargetControlID="txtDate">
    </ajaxControl:TextBoxWatermarkExtender>
    <ajaxToolkit:MaskedEditExtender ID="MaskedEdit_dt" runat="server"
        TargetControlID="txtDate"
        Mask="99/99/9999"
        MessageValidatorTip="true"
        OnFocusCssClass="MaskedEditFocus"
        OnInvalidCssClass="MaskedEditError"
        MaskType="Date"
        AcceptAMPM="true"
        AcceptNegative="Left"
        ErrorTooltipEnabled="True" />
    <ajaxToolkit:MaskedEditValidator ID="MaskedEditV_dt" runat="server"
        ControlExtender="MaskedEdit_dt"
        ControlToValidate="txtDate"
        EmptyValueMessage="Date is required"
        InvalidValueMessage="Date is invalid"
        Display="Dynamic"
        TooltipMessage="Input a date"
        EmptyValueBlurredText="Date is required"
        InvalidValueBlurredMessage="Date is invalid"
        IsValidEmpty="false"
        ValidationGroup="MKE" />
    <%--<asp:RegularExpressionValidator ID="regexpvalEndDateEdit" ErrorMessage="!" ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"
        ControlToValidate="txtDate" runat="server"></asp:RegularExpressionValidator>--%>
</div>

Code behind user control

internal string _DValue;
public string DValue
{
    get
    {
        if (_DValue == "")
        {
            _DValue = txtDate.Text;
        }
        else
        {
            txtDate.Text = _DValue;
        }
        return _DValue;
    }
    set { _DValue = value; }
}
public string IdClientId
{
    get { return this.ClientID; }
}
protected void Page_Load(object sender, EventArgs e)
{

}

I am able to get controls value using server side code. Now i need to access text-box(txtDate) value and MaskedEditValidator(MaskedEditV_dt) inerHtml from javascript. How can i do this.

Edit-1

User control in aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomControlTest2.aspx.cs" Inherits="CustomControlTest2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<%@ Register TagPrefix="uc1" TagName="UCCalender" Src="~/WebUserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>User Control Test</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true" />
<div>
    <table>
        <tr>
            <td>
                <uc1:UCCalender ID="UCCalStartDate" runat="server" DValue="" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnExe" runat="server" Text="Submit" onclick="btnExe_Click" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>
            </td>
        </tr>
    </table>
</div>
</form>

Code behind

protected void btnExe_Click(object sender, EventArgs e)
{
    lblMsg.Text = UCCalStartDate.DValue;
}
Was it helpful?

Solution

ASP.NET loads to display the UserControl, it ONLY renders the contents of the UserControl. The Controls in the usercontrol will rendered with the ID as $content_UControlName_Control. You can check this after the rendering the page. You can access the contol using that ID from Javascript like document.getElementById(content_UControlName_Control).

OTHER TIPS

Finally i got answer. Thanks to Nag

On button click

<asp:Button ID="btnExe" runat="server" Text="Submit" OnClientClick="getValue('UCCalStartDate_txtDate','UCCalStartDate_MaskedEditV_dt');" onclick="btnExe_Click" />

Javascript

function getValue(id,msk) {
        alert(document.getElementById(id).value);
        alert(document.getElementById(msk).innerHTML);
    }

Finaly i am able to access calander control's text-box value using java-script

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top