[SalesForce] Onchange from visualforce unable to get the value from Javascript

I have VF page as below

<apex:page standardController="Stack__c" extensions="Controller" tabStyle="Account">
<script>
function foo(data){    
    alert("Call came ");//this is displyed
    var d = document.getElementById(data).value;
alert('********The field value is ********'+d);// unable to get the value
}
 </script>
<apex:detail />

    <apex:form id="fid">
    <apex:pagemessages />
        <apex:pageBlock id="pgblock1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}"  onClick="unitval();" />
                <apex:commandButton action="{!cancel}" value="Cancel"/>
                <apex:commandButton action="{!reset}" value="Edit"/>              
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="2" title="Order Pad" rendered="{!rend}" id="pgsid" >                               
                <apex:inputField value="{!Stack__c.Ordered__c}"/>
                <apex:inputField value="{!Stack__c.Unit_OP__c}"  onchange="foo('{!$Component.pgsid.pgblock1.fid.unit}');" id="unit"/>                    
            </apex:pageBlockSection>                             
        </apex:pageBlock>       
    </apex:form>   
</apex:page>

When the user change the value from the Unit_OP__c field then I am unable to get the value from the script.Please tell me how to get the value in java script.

Please some one help me
Best Regards,
Ramesh

Best Answer

Change following line

<apex:inputField value="{!Stack__c.Unit_OP__c}"  onchange="foo(this.id);" id="unit"/>  

Even better approach will be to send current element to JavaScript function rather than passing only id & then finding same element.

<apex:inputField value="{!Stack__c.Unit_OP__c}"  onchange="foo(this);" id="unit"/> 


function foo(data){    
    alert("Call came ");//this is displyed
alert('********The field value is ********'+data.value);
}