how to capture the apex:inputField value on the front end?

Question

I have a picklist field that I am displaying on an old Visualforce page. I want to get the value that the user selects from the drop down to conditionally render another field based on their selection. I thought this would be as easy as a onChange function and pass the value and set the dynamic div's display style based on the value. When I try to pass the value, it is returned as null. I have also tried in the function with:

  function po(input, textid ) {
    console.log('--> ', document.getElementById('{!$Component.POBlock.potype}'));//brings in the entire picklist div
    console.log('--> ',document.getElementById('potype'));//j_id0:frm:poType
    console.log('--> ',document.getElementById(potype));//null
    console.log('--> ',document.getElementById("potype").value);//null
    console.log('--> ',input);//brings in the entire picklist div
    console.log('--> ',textid);//null

  }
    

I have also tried the other attribute functions such as onSelect, onFocus etc.

<div class="col-md-6" id="POBlock">
    <apex:inputField value="{!apexRecord.PO__c}" styleClass="form-control cs1" onChange="po(this, {!apexRecord.PO__c})" id="potype" />
</div>

Is there a good way to save the value of a apex:inputField on the front end?

Answer 1

Found it - the JS function should be looking to the event.currentTarget.value rather than taking in the input and textId