How to refer html element id specified in visualforce and pass onto javascript function?

Question

I have apex tag that generate input text field.

<apex:page id="my_page">
    <apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>

When someone clicks this field, I want to execute javascript.

But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.

   <input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010" 
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">

As you can see id has junk part :(

id="j_id0:j_id3:j_id4:c_txt"

In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???

UPDATE

Seems like I can do this but not working...

<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>

<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />

datepickerjs

var elem = getElementById('c_txt');
alert(elem);

The alert shows 'null' so something must be wrong.

Even this alert returns null...

var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);

Answer 1

You can use the $Component notation in javascript, you use it like so:

var e = document.getElementById("{!$Component.ComponentId}");

One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:

<apex:pageBlock id="theBlock">
    <apex:pageBlockSection id="theBlockSection">
        <apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>

// snip

// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");