Sign Up ›

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

Show output field value in VF NEW record page without reload

I am trying to display an output field value in VF page before saving the record. If user select checkIn & checkOut date  (both are date field), display the "Length of stay". Length of Stay is a formula field which is equal to (Check out date - check in date)
User-added image

Below is whatever I have tried so far (no error in any code): 
Method 1:
VF 
<table id="check-table">
    <thead> <td style="font-weight:bold"> Check In </td>       <td style="font-weight:bold"> Check Out </td> <td> </td> <td></td> </thead>                       
    <tr>
        <td> <c:NoDateLink > <apex:inputField value="{!objectReservation.Check_In__c }" id="startdate" style="width:10rem; margin-right:1rem;"  /> </c:NoDateLink> </td> <!--  rerender="lengthOfStay" background:url('DateIcon.png'); background-size: 1px 2px; background-repeat: no-repeat; -->
        <apex:actionRegion >
            <apex:outputPanel >
                <td><c:NoDateLink > <apex:inputField value="{!objectReservation.Check_Out__c }"   id="enddate" style="width:10rem;"  > 
                    <apex:actionSupport event="onchange" rerender="lengthOfStay"   />                                  
                    </apex:inputField> </c:NoDateLink> </td>   
            </apex:outputPanel>
        </apex:actionRegion>
        <td style="padding:0 2rem 0 2rem;" >  Length of Stay </td>
        <td >  <apex:outputField value="{!objectReservation.Length_of_Stay__c}" id="lengthOfStay"/> </td>
    </tr>
</table> <!-- End of Check-table -->

No error in VF page, but, onchange in CheckOut field, nothing changes. 

Method 2:
I also tried to put value from Apex class, but not sure about the syntax as follow:  
public void onChangeFnCall(){
        if(objectReservation.Check_Out__c  != null){
  
            Integer numberOfStay = (objectReservation.Check_In__c).daysBetween(objectReservation.Check_Out__c);
    //      objectReservation.Length_of_Stay__c = numberOfStay;
        }

VF
​ 
<table id="check-table">
    <thead> <td style="font-weight:bold"> Check In </td>       <td style="font-weight:bold"> Check Out </td> <td> </td> <td></td> </thead>                       
    <tr>
        <td> <c:NoDateLink > <apex:inputField value="{!objectReservation.Check_In__c }" id="startdate" style="width:10rem; margin-right:1rem;"  /> </c:NoDateLink> </td> <!--  rerender="lengthOfStay" background:url('DateIcon.png'); background-size: 1px 2px; background-repeat: no-repeat; -->
        <apex:actionRegion >
            <apex:outputPanel >
                <td><c:NoDateLink > <apex:inputField value="{!objectReservation.Check_Out__c }"   id="enddate" style="width:10rem;"  > 
                    <apex:actionSupport event="onchange" action="{!onchangefncall}" rerender="lengthOfStay"   />                                  
                    </apex:inputField> </c:NoDateLink> </td>   
            </apex:outputPanel>
        </apex:actionRegion>
        <td style="padding:0 2rem 0 2rem;" >  Length of Stay </td>
        <td >  <apex:outputField value="{!objectReservation.Length_of_Stay__c}" id="lengthOfStay"/> </td>
    </tr>
</table> <!-- End of Check-table -->


 
TanDTanD
Data is successfully saved as expected, but I want the Length of Stay value to be shown in VF before saving the record (partial relaod of the page)
Bhavin Mehta 20Bhavin Mehta 20
For this you need to call your method onChangeFnCall() from the getter method of Length_of_Stay__c or you can do these computation there itself. Please check the below mentioned code if it helps, it does similar thing which you want but with text input, it merges both the text input when it is inserted.
  
<apex:page controller="simplegetset">
  <apex:form >
    <apex:outputlabel value="Enter your name here"/>
       <apex:inputtext value="{!userinput}"> </apex:inputtext>
       
        <apex:inputtext value="{!userinput1}">
           <apex:actionsupport event="onclick" rerender="display" />
       </apex:inputtext>                   
    <apex:outputpanel id="display">
        <apex:outputtext value="The name entered is {!userinput2}"/>
    </apex:outputpanel>                   
  </apex:form>    
</apex:page>
  
public class simplegetset
{ 
public String userinput2;

public String getuserinput2(){return userinput+userinput1;}

public void setuserinput2(String userinput2)
{
this.userinput2 = userinput2;
}

public String userinput{get; set;}
public String userinput1{get; set;}


}

User-added image