0

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()"/>
        </apex:column>
        <script>
             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;                                        
             }                                                                              
        </script>
        <apex:column id="ltWt" headerValue="Lite Weight?">
           <apex:outputText value=""/> 
        </apex:column>
    ...

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 Nov 9 '17 at 12:18
5

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

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

</apex:page>

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:

sourceId=j_id0:j_id1:j_id2:j_id3:2:source
destinationId=j_id0:j_id1:j_id2:j_id3:2:destination

by keeping the $Component evaluations inside the table.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.