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}");

Answer 2

I got solution to my problem.

$Compoent global visualforce expression can only be used in visualforce code not inside of Javascript as far as my search.

Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.

Created Date: <apex:inputText id="dah" value="{!created}" size="50" 
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>

<script>
  function go(field) {
    var huh = document.getElementById(field).value;
    alert(huh); //returns the string u put inside of input text field
  }
</script>