+ Start a Discussion
prati@salesforceprati@salesforce 

Simple JAvascript in a Visual force page

Hi,
I am trying to execute a very simple javascript code on a visualforce page but I dont know what I am missing here, Below is a portion of my code,
<apex:page controller="PageReferSiteVisit" >
    <apex:pageMessages />
    <script>
        function changeCase(){
           var x = document.getElementById("id1");
           x.value = x.value.toUpperCase();
        }
    </script>
and in the same pageBlock, follwing is the portion where I am trying to get this funtion work,
<apex:pageBlockSectionItem >
        <apex:outputLabel >Name of Visit</apex:outputLabel>
        <apex:inputtext value="{!doctor}" id="id1" onchange="changeCase()"/>
      </apex:pageBlockSectionItem>
Please help me to know what am I missing here,

Thank you
Best Answer chosen by prati@salesforce
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello prati@salesforce,

In addition to soni piyush's solution:

Hardcode element's Id in your javascript code it is not recommended. So, a different scenario using the code above would be passing the element Id
as a parameter. By doing so, you are allowing your code to be reused as many times as you want in your Visualforce page. Please, consider the code below:

<apex:page standardController="Account">
<script>
    function changeCase(elId){
        var x = document.getElementById(elId);
        x.value = x.value.toUpperCase();
    }
</script>
<apex:form>
    <apex:inputField value="{!account.Name}" id="id1" onchange="changeCase('{!$Component.id1}');"/>
</apex:form> 
</apex:page>

Note that using the global merge field type $Component will allow you to get element's full Id. Consider reading the following dev guide:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm


Regards.
 

All Answers

{!Piyush_soni__c}{!Piyush_soni__c}
hi prati@salesforce 

all the apex elements are kind of server side controls which will have some prefixes to their Ids when its rendered on the client side..
so your apex Input Text will have an Id something like this. j_id0:j_id1:someId

you can check this in your browser development tools.. just right click on the input text and do Inspect Element and you should see the Id..  you can then use the full Id in your javascript code..
 
Thanks :)
If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.

 
prati@salesforceprati@salesforce
Thank you for your reply.
  So you are saying that whenever I want to use javaScript on my vf page, I need to inspect element and find the full id? The id which we give on the components, Can i use them?
prati@salesforceprati@salesforce
<apex:page standardController="Account">
<script>
    function changeCase(){
        var x = document.getElementById.("thePage:theForm:thePageCode:id1");
        x.value = x.value.toUpperCase();
    }
</script>
<apex:form >
    <apex:inputField value="{!account.Name}" id="id1" onchange="changeCase();"/>
</apex:form> 
</apex:page>

This is still not working.
Thanks
prati@salesforceprati@salesforce
User-added image
The error is changeCase not defined but I wonder why?
{!Piyush_soni__c}{!Piyush_soni__c}
hi prati@salesforce
please check your input element id , i test your code with some correction plese try this 
 
<apex:page standardController="account">
<script>
    function changeCase(){
        var x = document.getElementById("j_id0:j_id2:j_id3:j_id4"); // change this id with your input element id (see image below )
        x.value = x.value.toUpperCase();
    }
</script>
<apex:form >
  <apex:pageBlock>
    <apex:inputField value="{!account.Name}" onchange="changeCase()"/>
  </apex:pageBlock>
</apex:form> 
</apex:page>
now type any word in inputField and press tab or click outside of field and your word change in upperCase 
how to find page element id 
just right click on the input text and do Inspect Element and see id
User-added image 

* open image in other tab for better view (right click on image and select open image in new tab)

and one another thing is i see you are using inline vf editor (edit vf page by footer editor/development mode ) .  disable it and edit your vf page by developer console or vf page editor .

Thanks 
please let me inform if it work and mark it solve :)



 
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello prati@salesforce,

In addition to soni piyush's solution:

Hardcode element's Id in your javascript code it is not recommended. So, a different scenario using the code above would be passing the element Id
as a parameter. By doing so, you are allowing your code to be reused as many times as you want in your Visualforce page. Please, consider the code below:

<apex:page standardController="Account">
<script>
    function changeCase(elId){
        var x = document.getElementById(elId);
        x.value = x.value.toUpperCase();
    }
</script>
<apex:form>
    <apex:inputField value="{!account.Name}" id="id1" onchange="changeCase('{!$Component.id1}');"/>
</apex:form> 
</apex:page>

Note that using the global merge field type $Component will allow you to get element's full Id. Consider reading the following dev guide:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm


Regards.
 
This was selected as the best answer
prati@salesforceprati@salesforce
Thank you so much Piyush and Zuinglio Lopes, It was great help.