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.
Best Answer
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:
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.