Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

In Apex page I'm having 2 address sections i.e., Current Address and Permanent address but these address fields are placed in Custom setting and displaying through apex:repeat tag in page.We have a one check Permanent address is same as Current Address.When I click on that check box I need to copy current address in permanent address using Java Script but I'm not able to get Id's of the fields.Can any one provide the solution how to get the Id's field in JavaScript.

Thanks in Advance

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Although finding elements by ID is the first approach to consider, it is also possible to find elements by other attributes including their CSS class. You can add a class (that has no associated styling), and use the class names to find the elements.

For your situation where the field names are coming from a custom setting, using the class names to do the matching works well because you can just use the field name as the class name. (Visualforce does not allow ID values to be expressions.) Adding jQuery into the mix ensures that the code works well across multiple browsers.

Controller:

public with sharing class MyController {
    public String[] fromFields {
        get {
            return new String[] {'BillingStreet', 'BillingState'};
        }
    }
    public String[] toFields {
        get {
            return new String[] {'ShippingStreet', 'ShippingState'};
        }
    }
    public MyController(ApexPages.StandardController sc) {
        String[] fields = new String[] {};
        fields.addAll(fromFields);
        fields.addAll(toFields);
        sc.addFields(fields);
    }
}

Page:

<apex:page standardController="Account" extensions="MyController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockButtons>
                <apex:outputLink styleClass="copyLink">Copy</apex:outputLink>
            </apex:pageBlockButtons>
            <apex:pageBlockSection>
                <apex:repeat value="{!fromFields}" var ="f">
                    <apex:inputField value="{!Account[f]}" styleClass="{!f}"/>
                </apex:repeat>
                <apex:repeat value="{!toFields}" var ="f">
                    <apex:inputField value="{!Account[f]}" styleClass="{!f}"/>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
<apex:includeScript value="//code.jquery.com/jquery-1.11.0.min.js"/>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
   j$('.copyLink').click(function(e) {
       var fromFields = [<apex:repeat value="{!fromFields}" var ="f">'{!f}',</apex:repeat>];
       var toFields = [<apex:repeat value="{!toFields}" var ="f">'{!f}',</apex:repeat>];
       for (var i = 0; i < fromFields.length; i++) {
           j$('.' + toFields[i]).val(j$('.' + fromFields[i]).val());
       }
       e.preventDefault();
   });
});
</script>
</apex:page>

PS

This is one way of having a named function that you can also invoke in oncomplete:

<apex:actionSupport ... oncomplete="addClick()"/>

...

<script>
var j$ = jQuery.noConflict();
var addClick = function() {
   j$('.copyLink').click(function(e) {
       var fromFields = [<apex:repeat value="{!fromFields}" var ="f">'{!f}',</apex:repeat>];
       var toFields = [<apex:repeat value="{!toFields}" var ="f">'{!f}',</apex:repeat>];
       for (var i = 0; i < fromFields.length; i++) {
           j$('.' + toFields[i]).val(j$('.' + fromFields[i]).val());
       }
       e.preventDefault();
   });
};
j$(document).ready(addClick);
</script>
share|improve this answer
    
Thanks Keith it's working fine. –  Bujji Apr 26 at 14:37
    
How to use checkbox instead of output link to copy address –  Bujji Apr 26 at 14:38
    
@Bujji For a checkbox replace click with change and remove the e.preventDefault();. But what does the checkbox being checked or unchecked mean in that case? –  Keith C Apr 26 at 14:56
    
It's working fine when the initialy vf page is loaded but when we rerender any part of the page then it's not working.can you provide any suggestions. –  Bujji May 13 at 10:31
    
@Bujji Your j$(document).ready will attach the logic when the page is first loaded but if you re-load the section the logic is not re-attached by default. If you are using apex:actionfunction, that can have oncomplete JavaScript, and if you make your current j$(document).ready function a named function you can call that from both j$(document).ready and oncomplete. (That does work, but in general I try to use either jQuery or partial page refreshes but not both to keep things simpler.) –  Keith C May 13 at 10:55

In visualforce when you create an element like Salesforce well add a prefix for the DOM element Id So to get the exact DOM element Id you have to use $Component.myInputField

Code example :

<script>
 var jsId = [];
 // then in your JS function you could do something like this :
 document.getElementById(jsId["myInputField"]).value = "new val"; 
</script>

<apex:outputPanel >
  <apex:inputField value="{!MyObject__c.MyField__c}" id="myInputField"/>
  <script>jsId["myInputField"] = "{!$Component.myInputField}";</script>
</apex:outputPanel>

For more info official visualforce documentation

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.