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
synchronus_prateeksynchronus_prateek 

Getting the field value in VF form page to display in pop up.

Hi I am new to salesforce, so think this will be an elementary question.

 

The scenario is On Saving a VF form page a pop up has to populate having a value (which was entered in one of the field of VF form). Need help how to get this dynamic value in popup message?

jiah.choudharyjiah.choudhary

@synchronous_prateek,

 

Can you tel me how are displaying the popup, I mean using what?
synchronus_prateeksynchronus_prateek
I have created pop up and VF page but am not able to use VF page field value in Popup.

My code look like

VF page
"
<apex:page standardController="Registration__c" extensions="AlertBox">
    <apex:form >
        <apex:pageBlock title="Information">
            Registration no <apex:outputField value="{!Registration__c.Name}"/> <br/> <br/>
            First Name <br/> <apex:inputField value="{!Registration__c.First_Name__c}"/> <br/> <br/>
            Event <apex:inputField value="{!Registration__c.Event__c}" required="true"/> <br/>
        <apex:commandButton action="{!showPopup}" value="Save"/>
        </apex:pageBlock>
        <apex:outputPanel id="AlertBox">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
            <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
                Do you want to register for the  <Event Name>?  <br/><br/><br/>
            <apex:commandButton value="OK" action="{!save}"/>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>

<style type="text/css">
        .customPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>

</apex:page>

Extension


public class AlertBox{

    public AlertBox(ApexPages.StandardController controller) {

    }


   public boolean displayPopup {get; set;}
 
      public void closePopup(){
      displayPopup = false;
    }  
      public void showPopup(){    
      displayPopup = true;
    }
     
}
"

The Undeline and Bold Place in code is where the Event name is to be dynamic.
sguptasgupta
You can assign an id for the Registration__c.Event__c inputField and access it's value using simple javascript in your popup div section..
synchronus_prateeksynchronus_prateek

i tried that too, I gave Id to " Registration__c.Event__c inputField" and collected the value in a variable in the javascript.

But now I am stuck, how should i use this variable in my apex code to show value.??

It throws an error" the variable is not part of statndard controller ............."
sguptasgupta
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Do you want to register for the <div id="tgt"></div> <br/><br/><br/>

&lt;script&gt;function xyz(){
document.getElementId('tgt').innerHTML= <you js variable>
}&lt;/script&gt;
synchronus_prateeksynchronus_prateek

i have written my code as 

 

<apex:page standardController="Registration__c" extensions="AlertBox">
<apex:form >
<script>
function notEmpty(){
var eventField = document.getElementById('j_id0:j_id1:j_id3:myevent');

}
</script>
<apex:pageBlock title="Information">
Registration no <apex:outputField value="{!Registration__c.Name}"/> <br/> <br/>
First Name <br/> <apex:inputField value="{!Registration__c.First_Name__c}"/> <br/> <br/>
Last Name <apex:inputField value="{!Registration__c.Last_Name__c}" required="true"/> <br/>
Email <apex:inputField value="{!Registration__c.Email__c}" required="true"/> <br/>
Type <apex:inputField value="{!Registration__c.Type__c}" required="true"/> <br/>
Event <apex:inputField value="{!Registration__c.Event__c}" id="myevent" required="true"/> <br/>
Company website <br/> <apex:inputField value="{!Registration__c.Company_website__c}"/> <br/> <br/>
Phone Number <br/> <apex:inputField value="{!Registration__c.Phone_Number__c}"/> <br/> <br/>
Reason for Registration <br/> <apex:inputField value="{!Registration__c.Reason_for_Registration__c}"/> <br/> <br/>
<apex:commandButton action="{!showPopup}" value="Save" onclick="notEmpty();"/>
</apex:pageBlock>
<apex:outputPanel id="AlertBox">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Do you want to register for the {!eventField }? <br/><br/><br/>

<apex:commandButton value="OK" action="{!save}"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>

<style type="text/css">
.customPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}

</style>

</apex:page>

 

can u help me in this
sguptasgupta

I haven't gone thru ur full code..just giving you the  idea to fix your problem..

 

<apex:page standardController="Registration__c" extensions="AlertBox">
<apex:form >
<script>
function notEmpty(){
var eventField = document.getElementById('j_id0:j_id1:j_id3:myevent');

// ** this is not the right way to access the inputfield..please read the documentation for $Component


document.getElementById('evt_dyn').innerHTML=eventField.value;
}
</script>
<apex:pageBlock title="Information">
Registration no <apex:outputField value="{!Registration__c.Name}"/> <br/> <br/>
First Name <br/> <apex:inputField value="{!Registration__c.First_Name__c}"/> <br/> <br/>
Last Name <apex:inputField value="{!Registration__c.Last_Name__c}" required="true"/> <br/>
Email <apex:inputField value="{!Registration__c.Email__c}" required="true"/> <br/>
Type <apex:inputField value="{!Registration__c.Type__c}" required="true"/> <br/>
Event <apex:inputField value="{!Registration__c.Event__c}" id="myevent" required="true"/> <br/>
Company website <br/> <apex:inputField value="{!Registration__c.Company_website__c}"/> <br/> <br/>
Phone Number <br/> <apex:inputField value="{!Registration__c.Phone_Number__c}"/> <br/> <br/>
Reason for Registration <br/> <apex:inputField value="{!Registration__c.Reason_for_Registration__c}"/> <br/> <br/>
<apex:commandButton action="{!showPopup}" value="Save" onclick="notEmpty();"/>
</apex:pageBlock>
<apex:outputPanel id="AlertBox">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Do you want to register for the<div id="evt_dyn"></div>? <br/><br/><br/>

<apex:commandButton value="OK" action="{!save}"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>

<style type="text/css">
.customPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}

</style>

</apex:page>
synchronus_prateeksynchronus_prateek

i tried your sugesstion, but still m unable to get value.

 

This is what I used, plz let me know if any correction is required

 

<apex:page standardController="Registration__c" extensions="AlertBox">
<apex:form >
<script>
function notEmpty(){
document.getElementById('myevent').innerHTML=eventField.value;

}
</script>
<apex:pageBlock title="Information">
Registration no <apex:outputField value="{!Registration__c.Name}"/> <br/> <br/>
First Name <br/> <apex:inputField value="{!Registration__c.First_Name__c}"/> <br/> <br/>
Last Name <apex:inputField value="{!Registration__c.Last_Name__c}" required="true"/> <br/>
Email <apex:inputField value="{!Registration__c.Email__c}" required="true"/> <br/>
Type <apex:inputField value="{!Registration__c.Type__c}" required="true"/> <br/>
Event <apex:inputField value="{!Registration__c.Event__c}" id="myevent" required="true"/> <br/>
Company website <br/> <apex:inputField value="{!Registration__c.Company_website__c}"/> <br/> <br/>
Phone Number <br/> <apex:inputField value="{!Registration__c.Phone_Number__c}"/> <br/> <br/>
Reason for Registration <br/> <apex:inputField value="{!Registration__c.Reason_for_Registration__c}"/> <br/> <br/>
<apex:commandButton action="{!showPopup}" value="Save" onclick="notEmpty();"/>
</apex:pageBlock>
<apex:outputPanel id="AlertBox">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Do you want to register for the<div id="myevent"></div>? <br/><br/><br/>
<apex:commandButton value="OK" action="{!save}"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>

<style type="text/css">
.customPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}

</style>

</apex:page>
sguptasgupta

Okay, I just went thru ur codeline...solution is very simple...no need of javascript..

 

<apex:page standardController="Registration__c" extensions="AlertBox">
<apex:form >

<apex:pageBlock title="Information">
Registration no <apex:outputField value="{!Registration__c.Name}"/> <br/> <br/>
First Name <br/> <apex:inputField value="{!Registration__c.First_Name__c}"/> <br/> <br/>
Last Name <apex:inputField value="{!Registration__c.Last_Name__c}" required="true"/> <br/>
Email <apex:inputField value="{!Registration__c.Email__c}" required="true"/> <br/>
Type <apex:inputField value="{!Registration__c.Type__c}" required="true"/> <br/>
Event <apex:inputField value="{!Registration__c.Event__c}" id="myevent" required="true"/> <br/>
Company website <br/> <apex:inputField value="{!Registration__c.Company_website__c}"/> <br/> <br/>
Phone Number <br/> <apex:inputField value="{!Registration__c.Phone_Number__c}"/> <br/> <br/>
Reason for Registration <br/> <apex:inputField value="{!Registration__c.Reason_for_Registration__c}"/> <br/> <br/>
<apex:commandButton action="{!showPopup}" value="Save" rerender="AlertBox"/>
</apex:pageBlock>
<apex:outputPanel id="AlertBox">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Do you want to register for the{!Registration__c.Event__c}? <br/><br/><br/>
<apex:commandButton value="OK" action="{!save}"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>

<style type="text/css">
.customPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}

</style>

</apex:page>
synchronus_prateeksynchronus_prateek

I edited as per your suggestion 

 

 

 

In the pop up, instead of that Event I am getting the salesforce ID of that event.

 

 

 
sguptasgupta
you just need to map the correct field that holds value for the event name in your popup box. Are you using Registration__c.Event__c for storing the event name ? See, if you can post the structure of your custom object, then I can see if I could help you in finding the right mapping..
synchronus_prateeksynchronus_prateek

Events and Registration are my custom objects, having Master- detail relationship. So When I am filling Registration VF page, I have to enter a field Event , getting value from the Event Object. 
sguptasgupta
that's why you are seeing the id...map the field from Event object which holds the event name value
synchronus_prateeksynchronus_prateek

I am using "{!Registration__c.Event__r.Name}" now Nothing is shown in Pop up not even the Salesforce ID.

 

Is there any way that if Iam getting Salesforce ID , I can convert it into value?