How do I get pass the id of the inputfield to a javascript in visualforce?

Question

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

    <pageblock>
       <pageBlockSection>
          <pageBlockSectionItem>
             <apex:inputfield id='sampleId1'>
          <pageBlockSectionItem>
             <apex:inputfield id='sampleId2'>
          <pageBlockSectionItem>
             <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),

    <script>
      function compute(sampleId1, sampleId2, sampleId3) {
         alert(document.getElementbyId(sampleId1));
      }
    </script>

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.

Answer 1

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.

Answer 2

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">
<pageblock>
       <pageBlockSection>
          <pageBlockSectionItem>
             <apex:inputfield id="sampleId1" value="{!Account.name}"/>
            </pageBlockSectionItem>

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

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.