function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Pranav_VaidyaPranav_Vaidya 

Java script function does not read Apex lookup field values

Hi,

 

I have a VF page and a controller for this page. The controller uses an instance of one of my custom objects. This custom has a look-up field which I am showing on my VF page. Below is my VF page code. When I click on Add I expect the Javascript function to show the value entered in the look-up field but there is no output. I am missing something...could you please help me understand why my function is not displaying the entered value.

 

Thanks in advance.

 

Code-

<apex:page controller="TripLegsGroup" >

<script>
  function AddCity() {
    alert('Entered');
    var mct = document.getElementById('{!$Component.mForm.mCity}').value;
    alert (mct);   
  }
   
</script>

 

<apex:pageblock title="Group book legs">
  <apex:form id="mForm" >
    <apex:pageBlock title="Enter trip leg details">
      <apex:pageblockSection columns="2">
       <apex:pageblockSectionItem >
          <apex:outputLabel value="Travelling to:"/>
          <apex:outputPanel >
             <apex:inputField id="mCity" value="{!GroupLeg.To_City__c}"  />   <-- This is look-up field, I would like to display the entered value
             <apex:commandButton value="Add" onkeypress="return AddCity()"/>  <-- This command button click calls JS function
          </apex:outputPanel>
       </apex:pageblockSectionItem>
      </apex:pageblockSection>
    </apex:pageBlock>      
  </apex:form>
  </apex:pageblock>

</apex:page>

bvramkumarbvramkumar

Command buttons have submit behaviour by default. your JS function is reading an element on the page. Try using simple 

<input type="button" tag... instead of commandbutton.
Chamil MadusankaChamil Madusanka

Try this changes

 

<apex:page controller="TripLegsGroup" >

<script>
  function AddCity(id) {
    alert('Entered');
    var mct = document.getElementById(id).value;
    alert (mct);   
  }
   
</script>

 

<apex:pageblock title="Group book legs">
  <apex:form id="mForm" >
    <apex:pageBlock title="Enter trip leg details">
      <apex:pageblockSection columns="2">
       <apex:pageblockSectionItem >
          <apex:outputLabel value="Travelling to:"/>
          <apex:outputPanel >
             <apex:inputField id="mCity" value="{!GroupLeg.To_City__c}"  />   <-- This is look-up field, I would like to display the entered value
             <apex:commandButton value="Add" onkeypress="return AddCity('{!$Component.mCity}')"/>  <-- This command button click calls JS function
          </apex:outputPanel>
       </apex:pageblockSectionItem>
      </apex:pageblockSection>
    </apex:pageBlock>      
  </apex:form>
  </apex:pageblock>

</apex:page>

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.