I'm new to developing visual force pages and forgive me if this is an easy question but I'm having problems getting the ID of an apex:inputfield and passing it to javascript. What I'm trying to do is

  1. create a link/button that will get the value (by passing ID) of a certain inputfield
  2. populate the other inputfields based on the value of #1

I have this code that calls the javascript

    <apex:outputLink value="javascript:compute('{!$Component.Amount}', '{!$Component.lc1}', '{!$Component.lc2}', '{!$Component.lc3}', '{!$Component.lc4}', '{!$Component.lc5}', '{!$Component.lc6}')">Compute</apex:outputLink>

lc1, lc2, lc3...lc6 as you might guess are the ids of the variables im going to use.

Here comes the part where i get the problem of no id being passed, the javascript.

            function compute(amount, lc1, lc2, lc3, lc4, lc5, lc6) {

                /* Compute the loan charges depending on the loan amount here
                document.getElementById(lc1).value = 6;
                document.getElementById(lc2).value = 6;
                document.getElementById(lc3).value = 5;
                document.getElementById(lc4).value = 5;
                document.getElementById(lc5).value = 5;
                document.getElementById(lc6).value = 5;*/

The part alert(document.getElementById(amount)) should alert the id of amount inputfield right? What am I doing wrong here? Are there specific places where the javascript call or the script itself should be placed? Thanks for an answer in advance!

  • I might add, the input fields are inside a pageBlockSectionItem, which is inside a pageBlockSection, which is inside a pageBlock, which is inside a form.
    – Gionelle
    Jul 5, 2014 at 10:29
  • Please add visualforce markup so that we can help Jul 5, 2014 at 11:30
  • I recommend the following resources Visualforce Workbook and the Visualforce Developer’s Guide. You may also want to look at How do I start to debug my own VF javascript.
    – crmprogdev
    Jul 5, 2014 at 14:39
  • Can you check the browser console for any errors? When you run this statement document.getElementById(amount) you will get an object as an alert. Try alerting only this alert(amount) and this should give you the Id of the amount field
    – Sam
    Jul 5, 2014 at 14:44
  • I'd try switching to a normal <a href="#" onClick="compute(PASS IN VARS)"/>link text</a>
    – Phil B
    Jul 5, 2014 at 14:59

1 Answer 1


The $Component notation is quite picky about the correct number of prefixes, so if your amount, lc1 elements are nested inside other Visualforce components (such as pageblocks, datatables, outputpanels) you need to include the full hierarchy to get the correct name. I used to build this up in baby steps starting with the outermost container and check the page source each time to see if the $Component rendered anything (meaning it was a valid path) or if it was blank (meaning invalid).

These days I use a JQuery selector to find the element that ends with the particular id - that way I don't have to worry about the location prefixes and I can move elements around the page without having to rebuild the "fully qualified" name.

I include JQuery from a CDN, but you could load it as a static resource :

      value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />

and then pass the id string literals to the JavaScript function :

<apex:outputLink value="javascript:compute('Amount', 'lc1',  ... etc);

then build up JQuery selectors based on the literal ids:

    function compute(amount, lc1, lc2, lc3, lc4, lc5, lc6) {

       /* Compute the loan charges depending on the loan amount here */
          $('[id$=' + lc1 + ']').val(6);
          $('[id$=' + lc2 + ']').val(6);
         ... etc

The key aspect of the selector is the '[id$=' + lc1 + ']' this translates to 'the element with an id that ends with the contents of the lc1 variable'. I've also used the JQuery val() method to set the value of the element.

You must log in to answer this question.

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