I want to get component Id and value of a picklist in VF page, based on the value selected in picklist, other input field value needs to be populated with 'Yes' or 'No', Since this needs to happen on the fly, i am uing javaScript function that reads the value selected and sets another field value, While i am getting through this for number and text type of fields, i am getting the following error for picklist field

Uncaught TypeError: Cannot read property 'undefined' of undefined

My sample code:


<apex:pageBlockSection title="PI"> 
   <apex:pageblockTable value="{!piList }" var="pi">
        <apex:column headerValue="Item Type">
            <apex:inputField id="it" value="{!pi.ItemType__c}" onchange="checkWeight()"/>
             function checkWeight() 
                 var item = document.getElementById('{!$Component.it}').value;
                 var opt = item.options[item.selectedIndex].value;
                 console.log('item selected: ' + item.options[item.selectedIndex].value);
                 var LiteWeight;
                 if (opt == 'ABC') {
                     LiteWeight = 'Yes';
                 else if(opt == 'XYZ') {
                     LiteWeight = 'No';
                 <!-- 8 more else if condition -->
                 document.getElementById('{!$Component.ltWt}').innerHTML= LiteWeight;                                        
        <apex:column id="ltWt" headerValue="Lite Weight?">
           <apex:outputText value=""/> 

Can someone please help? Thanks for your time.

  • I think this was pretty straight forward, just used item to compare against text value in if condition.
    – Arun
    Commented Nov 9, 2017 at 12:18

1 Answer 1


Here is a working example of taking a value from an input field in a row and setting that value in another part of the row that you can base your code on:

<apex:page standardController="Account" recordSetVar="accounts">

    <apex:pageBlock >
        <apex:pageBlockTable value="{! accounts }" var="a">
                <apex:inputField id="source"
                        value="{! a.AccountSource }"
                        onchange="handleChange('{! $Component.source }', '{! $Component.destination }')"/>
                <apex:outputText id="destination" value="{! a.Name }"/>

function handleChange(sourceId, destinationId) {
    console.log('sourceId=' + sourceId);
    console.log('destinationId=' + destinationId);
    var v = document.getElementById(sourceId).value;
    document.getElementById(destinationId).innerHTML = v;


This avoids lots of copies of the JavaScript but does ensure that the unique Id values for the rows (distinguished by a row index number) are correct producing e.g. log output of:


by keeping the $Component evaluations inside the table.

  • Thanks @Keith C, i have restructured my code as per your suggestion.
    – Arun
    Commented Nov 9, 2017 at 12:12
  • @Arun Glad it helped.
    – Keith C
    Commented Nov 9, 2017 at 17:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .