function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
h20riderh20rider 

Access input field inside component from the Page

I have a page where I have a javascript form validation where some of the input variables are within custom components.  I have not problem access the input variables that are within the page.  but if there are in the custom components, I can figure out how to access them

 

Any ideas? It is using the apex to assign the Id ( ie <apex:selectList)

 

Update:

 

I highlighted the issue I am having below. I am unable to get the input of the component in the page

<apex:component controller="MultiSelectPicklistCont" selfClosing="true" >
<apex:selectList id="selectList" styleClass="{!picklistStyleClass}" multiselect="true" size="5">
<apex:selectOptions value="{!unselected}" />
</apex:selectList>
</apex:component >

Page
<apex:page>
</script type="text/javascript">
var start = parseInt(document.getElementById("{!$Component.frmFilter.dateRangeStart}").value);
var end = parseInt(document.getElementById("{!$Component.frmFilter.dateRangeEnd}").value);
var marketlist = document.getElementById("{!$Component.frmFilter.mspm.picklist}"); // equals null
</script>
<apex:form id="frmFilter">

<c:MultiSelectPicklist SelectOptions="{!mMediator.selectOptions}" PicklistStyleClass="pickList" MultiSelectPicklistManager="{!mspm}" />


<apex:selectList size="1" styleClass="dropdown" value="{!FO_StartDate}" id="dateRangeStart" >
<apex:selectOption itemValue="0" itemLabel="Q1" />
<apex:selectOption itemValue="3" itemLabel="Q2" />
<apex:selectOption itemValue="6" itemLabel="Q3" />
<apex:selectOption itemValue="9" itemLabel="Q4" />
</apex:selectList>
<apex:selectList size="1" styleClass="dropdown" value="{!FO_EndDate}" id="dateRangeEnd" >
<apex:selectOption itemValue="2" itemLabel="Q1" />
<apex:selectOption itemValue="5" itemLabel="Q2" />
<apex:selectOption itemValue="8" itemLabel="Q3" />
<apex:selectOption itemValue="11" itemLabel="Q4" />
</apex:selectList>
</apex:form>

</apex:page>

Starz26Starz26

add id="xxxxx" to the tag

Starz26Starz26

OR, I think what you mean is to select the individual rows...

 

I have done this before by setting the value of style to the ID of the record and using selectors on the style and not ID: The issue then is knowing what ID to select which can be passed using onclick events etc.

 

 

style="{!account.id}"
h20riderh20rider

I highlighted the issue I am having below. I am unable to get the input of the component in the page 

 

<apex:component controller="MultiSelectPicklistCont" selfClosing="true" >

<apex:selectList id="selectList" styleClass="{!picklistStyleClass}" multiselect="true" size="5">
<apex:selectOptions value="{!unselected}" />
</apex:selectList>

</apex:component >

 

Page

<apex:page>

</script type="text/javascript">

var start = parseInt(document.getElementById("{!$Component.frmFilter.dateRangeStart}").value);
var end = parseInt(document.getElementById("{!$Component.frmFilter.dateRangeEnd}").value);
var marketlist = document.getElementById("{!$Component.frmFilter.mspm.picklist}"); // equals null

</script>

   <apex:form id="frmFilter">

 

<c:MultiSelectPicklist SelectOptions="{!mMediator.selectOptions}" PicklistStyleClass="pickList" MultiSelectPicklistManager="{!mspm}" />

 

 

<apex:selectList size="1" styleClass="dropdown" value="{!FO_StartDate}" id="dateRangeStart" >
<apex:selectOption itemValue="0" itemLabel="Q1" />
<apex:selectOption itemValue="3" itemLabel="Q2" />
<apex:selectOption itemValue="6" itemLabel="Q3" />
<apex:selectOption itemValue="9" itemLabel="Q4" />
</apex:selectList>

<apex:selectList size="1" styleClass="dropdown" value="{!FO_EndDate}" id="dateRangeEnd" >
 <apex:selectOption itemValue="2" itemLabel="Q1" />
<apex:selectOption itemValue="5" itemLabel="Q2" />
<apex:selectOption itemValue="8" itemLabel="Q3" />
<apex:selectOption itemValue="11" itemLabel="Q4" />
</apex:selectList>

</apex:form>

 

</apex:page>

h20riderh20rider

I solved this by puting this in my component

<script type="text/javascript">
var pickListId = '{!$Component.pickList}';
 </script>

 

and in the page

 

var marketlist = document.getElementById(pickListId);