Sign Up ›

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

Using document.getElementById

Iam trying to get the value of the field entered by the user and use that value to show up other fields on the visualforce page. I did below. We have been dynamically pulling the fields on to the visualforce page based on the data in some objects.. so the id's will changed based on the number of fields that display for each record type. So i tried this

  var code = document.getElementById('pageid:codeid:codeparent:1:codechild:0:codeinnerchild:2:thecode').value;

the part where it says codeparent:1, what does that :1 mean?? those values after colon are changing based on the fields diaplyed on the vf page .How can i get the value irrespective of the fields displayed on the vf page??

Thanks
Mahesh DMahesh D
Hi

Please check the below examples:

The following JavaScript method references a component named msgpost in a Visualforce page: 
function beforeTextSave() {
    document.getElementById('{!$Component.msgpost}').value = 
        myEditor.getEditorHTML();
}
<apex:page>
    <apex:outputText id="msgpost" value="Emacs"/> is great.
</apex:page>
If your component is nested, you might need to use a more complete component path specifier. For example, if your page looks like this:
  
<apex:page>
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="theSection" columns="1">
            <apex:pageBlockSectionItem id="theSectionItem">
                <apex:outputText id="theText">
                    Heya!
                </apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
  
document.getElementById(
    "{!$Component.theBlock.theSection.theSectionItem.theText}")

If it is dynamic then:
  
<apex:outputPanel layout="block">
	        <label for="checkbox">Click this box to change text font:</label>
	        <input id="checkbox" type="checkbox"
	            onclick="changeFont(this,'{!$Component.thePanel}');"/>
	    </apex:outputPanel>
  
<script>
	        function changeFont(input, textid) {
	            if(input.checked) {
	                document.getElementById(textid).style.fontWeight = "bold";
	            }
                   else {
	                document.getElementById(textid).style.fontWeight = "normal";
	            }
	        }
	    </script>

Also go through the below links for more information:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm

http://stackoverflow.com/questions/4190072/how-to-refer-html-element-id-specified-in-visualforce-and-pass-onto-javascript-f

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_access.htm

http://salesforce.stackexchange.com/questions/26995/issue-with-getting-element-using-elementid

http://salesforce.stackexchange.com/questions/50095/how-to-use-external-javascript-function-in-visualforce

http://www.jitendrazaa.com/blog/salesforce/get-dom-elementid-of-the-visualforce-components/

http://stackoverflow.com/questions/8998313/get-values-of-form-field-in-javascript-from-a-visualforce-page

http://th3silverlining.com/2009/06/17/visualforce-component-ids-javascript/

Please do let me know if it helps you.

Regards,
Mahesh