Apex Code Development You need to sign in to do that
Don't have an account?
prati@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
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
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
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.
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?
<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
The error is changeCase not defined but I wonder why?
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 upperCasehow to find page element id
just right click on the input text and do Inspect Element and see id
* 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 :)
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.