How to Call/Reference a TextBox control on the client side

Posted on 2005-04-27
Last Modified: 2010-04-07
How do I call or reference a textbox control on the client side.  I have a JavaScript pop-up calendar and it works fine in my classic ASP application but now I cannot work out how to call the textbox, have tried so many combinations.

Here is the some of the code

<td valign="baseline">
<asp:textbox id="PreferredDateA" text='<%# rsViewBookingsDetail.FieldValue("PreferredDateA", Container) %>' TextMode="SingleLine" Columns="32" runat="server" ReadOnly="true" /></td>
<td valign="baseline"><img src="images/calendar.gif" width="22" height="17" border="0" onclick='showCalendar(this, document.all('PreferredDateA'),"dd/mm/yyyy",null,0,-1,305)'>
<asp:RequiredFieldValidator runat="server" ID="date1" ControlToValidate="PreferredDateA" ErrorMessage = "Please select a Preference Date "/></td>

I don't know why .NET does not conform to the DOM model 'document.form1.textbox1....... why do they make it harder not easier.  

I know maybe its b/c its all run at the server but why can't I reference the textbox easily.
Question by:simonettaj
    LVL 9

    Expert Comment

    You can use this to retrieve the textbox's client-side ID:

    <%= this.PreferredDateA.ClientID %>

    then you can grab the textbox from the popup using this:

    window.opener.document.forms(0).[control's clientid].value = '[new value]';

    Author Comment

    Okay so how could I integrate this into the below part I need it to be an onclick event of the image tag.

    'showCalendar(this, document.all('PreferredDateA'),"dd/mm/yyyy",null,0,-1,305)'>

    Could I put this in <%= this.PreferredDateA.ClientID %>

    'showCalendar(this, document.all('<%= this.PreferredDateA.ClientID %>'),"dd/mm/yyyy",null,0,-1,305)'>


    LVL 11

    Expert Comment

    To reference an control you can use:




    LVL 9

    Accepted Solution

    If you want to pass the reference to the textbox, use this:

    <img ... onclick='showCalendar(this, document.getElementById("<%= PreferredDateA.ClientID %>"),"dd/mm/yyyy",null,0,-1,305)'>

    Author Comment

    Hi BurntSky

    I copied and pasted your line of code and it came back with object expected error .

    Is there something missing?

    Here is the web page if you want to see what is happening.....
    LVL 9

    Expert Comment

    Very strange.  I saved the generated .aspx and the popcalendar.js files to my machine and opened it in IE.  It works fine.

    This leads me to believe that there's some other problem... a confliction of some sort with another javascript function maybe?  Try making a copy of the page and eliminating pieces of it until the problem disappears.

    If it wasn't 2:30am here and this question was worth more than 125 points I might be of more help.  If I think of something else, I'll let you know.

    Author Comment

    Thanks burnt sky it works I have in include the JavaScript code within the page itself and not as a reference file for some reason.

    James Simonetta.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
    I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
    To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now