[SalesForce] How to get pass the id of the inputfield to a javascript in visualforce

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.

Best Answer

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.

Related Solutions

[SalesForce] Passing ID of an apex:inputfield to javascript

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 :

<apex:includescript 
      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);
  Compute
</apex:outputLink>

then build up JQuery selectors based on the literal ids:

<script>
    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
    }
</script>

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.

[SalesForce] Visualforce inputfield focus by keypress

You can achieve the required functionality by capturing the keypress on the document and focussing on the required input accordingly. The following code will focus on the input with id "a" when ctrl+z is pressed(keycode for z is 90).

<script>
function KeyPress(e) {
      var evtobj = window.event? event : e
      if (evtobj.keyCode == 90 && evtobj.ctrlKey){
          alert("Ctrl+z");
          document.getElementById("a").focus();
      }
}
document.onkeydown = KeyPress;
</script>
<input type="text" id="a">

But when i tried to use keyCode 80(keyCode for p) it opens the print popup when i pressed ctrl+p. Its the default combination which is reserved for print preview and you cannot override it.

Hope it helps.

Related Topic