This js getElementById command is working when accessing an element under a tag...

            <apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">                  
                   <apex:inputHidden value="{!NeedsApproval}" id="needsapproval"/>

by using the following js in a function called from a button click...

            var text = document.getElementById('{!$Component.mainpage.mainform.selected.needsapproval}').value;

Now when trying to access an value from an apex:inputField within an apex:pageblockTable under the same apex:pageblock I am unable to get the value.

Here's the VF...

            <apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">                  
                   <apex:inputHidden value="{!NeedsApproval}" id="needsapproval"/>               
                   <apex:pageblockTable value="{!shoppingCart}" var="s" id="ProdTable">              
                        <apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Approval_Level__c.Label}" id="level">                   
                            <apex:inputField value="{!s.Approval_Level__c}" style="width:20px" />
                        </apex:column>                   
                   </apex:pageblockTable>
            </apex:pageBlock>

And here is the js command that does not work when called from the same method when 1 record exists in the table...

var text = document.getElementById('{!$Component.mainpage.mainform.selected.ProdTable.0.level}').value;

I think I'm referencing the element correctly based on the source behing the VF page.

Can anyone see what am I doing wrong here?

Regards
Lance Cresswell