Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abilash Kosigi 8Abilash Kosigi 8 

Fetching a value of Visualforce page to Javascript

I would like to fetch the value of count which is written below  in a visualforce page into javascript and modify it. Thereafter I would like to rerender it into another field.
<apex:outputtext id= "count" value ="{!50}" />

Javascript:
 a = document.getElementById('{!$Component.count}').value;
alert('a is' + a);
The above statement is used to fetch the value. When I displaying through alert, it is showing as 'a is undefined'. Can anyone please help on how to fetch the correct value.
 
Best Answer chosen by Abilash Kosigi 8
lakslaks
I did try out the same before posting.

Here is the code snippet that I tried to confirm the logic :
  
<apex:page >
<apex:form id="theform">
<script>
function check()
{
    a = document.getElementById('{!$Component.count}').innerHTML;
    document.getElementById('{!$Component.count2}').innerHTML = a;
}
</script>

  <apex:outputtext id="count" value="{!50}" />
  
  <apex:outputtext id="count2" value="" />
    
  <apex:commandButton onclick="check();return false;" value="Click"/>
</apex:form>
</apex:page>

Regards,
Lakshmi.

All Answers

Anoop yadavAnoop yadav
Hi,
Check the below link.
https://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_global_component.htm
lakslaks
Hi Abhilash,

You need to use .innerHTML for outputtext.
  
a = document.getElementById('{!$Component.count}').innerHTML;
alert('a is ' + a);

If this resolved your issue kindly mark it as the solution.

Regards,
Lakshmi.
 
Abilash Kosigi 8Abilash Kosigi 8
Thanks for your replies.
a = document.getElementById('{!$Component.count}').innerHTML;

This is fetching the value into javascript. How can I display the modified value in javascript in another ouputtext tag in visualforce. Can you please let me know.

 
lakslaks
You can do -
document.getElementById('{!$Component.<outputtextfieldID>}').innerHTML = a;
  
<script>
function check()
{
    a = document.getElementById('{!$Component.count}').innerHTML;
    document.getElementById('{!$Component.count2}').innerHTML = a;
}
</script>

  <apex:outputtext id="count" value="{!50}" />  
  <apex:outputtext id="count2" value="" />

Regards,
Lakshmi.
Abilash Kosigi 8Abilash Kosigi 8
Hi Lakshmi,

Thanks for you reply again. I have tried this thing before also. Setting a value in a visual force element through javascript does not work in this way.


<apex:page >
<script>
function check()
{
     a = document.getElementById('{!$Component.count}').innerHTML;
    document.getElementById('{!$Component.count2}').innerHTML = b;
   
</script>

  output1: <apex:outputtext id="count" value="{!50}" />
  output2: <apex:outputtext id="count2" value="" />
</apex:page>

When I ran above code, the output is
output1:50 output2:
Output2 is turning out to. be null.
Note: I do not want to involve Controller class here. My requirement is to execute this kind of logic at page level. Please share your inputs if any.

Best Regards,
Abilash
lakslaks
Hi,

What is the value in 'b' here. That is what will be set.

If you want to set the value in a, you will have to do

document.getElementById('{!$Component.count2}').innerHTML = a;


Regards,
Lakshmi.
lakslaks
I did try out the same before posting.

Here is the code snippet that I tried to confirm the logic :
  
<apex:page >
<apex:form id="theform">
<script>
function check()
{
    a = document.getElementById('{!$Component.count}').innerHTML;
    document.getElementById('{!$Component.count2}').innerHTML = a;
}
</script>

  <apex:outputtext id="count" value="{!50}" />
  
  <apex:outputtext id="count2" value="" />
    
  <apex:commandButton onclick="check();return false;" value="Click"/>
</apex:form>
</apex:page>

Regards,
Lakshmi.
This was selected as the best answer
Abilash Kosigi 8Abilash Kosigi 8
Thanks Laksmi, It worked. I was not checking the event that triggers this javascript properly.
lakslaks
Ok. 
Glad that it worked. :-)