Forgive me if this is very easy to do, but I'm having problems, specifically, no ID gets passed to the javascript.

I have MULTIPLE input fields defined like this

             <apex:inputfield id='sampleId1'>
             <apex:inputfield id='sampleId2'>
             <apex:inputfield id='sampleId3'>

Now, I want to pass the id of these fields to a javascript function, i do this as such:

    <apex:outputLink value="javascript:compute('{!$Component.sampleId1}', '{!$Component.sampleId2}', '{!$Component.sampleId3}')">Compute</apex:outputLink>

which is placed after the definitions of the apex inputfields.

But when I alert the document.getElementById of the Component ( using this script),

      function compute(sampleId1, sampleId2, sampleId3) {

it alerts NULL. What am i doing wrong here? Is it something with the placement of the javascript and outputlink? Any help would be welcome! Thanks in advance.

2 Answers 2


I tried your code, please notice "document.getElementbyId", that should be "document.getElementById", it's a typo.

If your code still not work, please try $('[id$=sampleId1]') with jquery.

  • Yeah, $component is usually more trouble than its worth. Using the jquery selector for ID ends with makes life easier.
    – Phil B
    Commented Jul 7, 2014 at 19:06

I support Allen please use correct method name it should be "document.getElementById". Apart from that I want to add one more thing that when you are using $Component then you have to maintain the heirarchy. For example below is the code snippet.

<apex:form id="frm">
             <apex:inputfield id="sampleId1" value="{!Account.name}"/>

            <apex:commandButton onclick="compute('{!$Component.frm:sampleId1}');return false;" value="Hello"/> 

if you have noted the in apex:commandbutton onclick event I have used the $Component which traverses element hierarchy.

Also plz read this link click here Hope this will help you.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .