getElementById inside an apex composition

Question

I am having a difficult time trying to get an input text value from an element that is inside a template.

I notice when inspecting the page that between the tags of define and the form the page is adding a new span.

When the below form is outside the define section the javascript works fine and the inspect element looks like:

j_id0:theForm:billingCity

However, when i save it inside the define section a new element is added and the element looks like

j_id0:j_id2:theForm:billingCity

The VF page:

<apex:page standardController="XXXX" extensions="YYY" showHeader="false" sidebar="false">
<title>VF Title</title>
<apex:composition template="PortalSiteTemplate">
<apex:define name="body">
    <apex:form id="theForm">
        <fieldset>
            <legend>
                Account Details
            </legend>
        <div class="form-group">
            <apex:inputText value="{!billingCity}" styleClass="form-control" html-placeholder="City" id="billingCity" />
        </div>
        </fieldset>
    </apex:form>
</apex:define>
</apex:composition>
<script type="text/javascript">
    function verAcc(){
        var city;
        city = document.getElementById("{!$Component.theForm.billingCity}").value;
        alert(city);
    }
</script>
</apex:page>

Answer 1

You can simple use getElementsByClassName() to retrieve the values of the inputText which has been specified by styleClass="form-control"

var elements = document.getElementsByClassName('form-control');

for(var i=0; i<elements.length; i++) {
  //it will display inputText value
    alert(elements[i].value);
}

Answer 2

The issue here is with the $component hierarchy. You have actually identified the issue yourself by mentioning that an additional ID is being added when form is outside the define section.

To solve this give an ID to the apex:define like this:

<apex:define name="body" id="thedefine">
<apex:form id="theForm">
    <fieldset>
        <legend>
            Account Details
        </legend>
    <div class="form-group">
        <apex:inputText value="{!billingCity}" styleClass="form-control" html-placeholder="City" id="billingCity" />
    </div>
    </fieldset>
</apex:form>

Now, refer as follows:

city = document.getElementById("{!$Component.thedefine.theForm.billingCity}").value

This should work.

A general note: For ease of use I prefer using jQuery, where I can refer to the ID directly using a wildcard as follows:

$j('[id$="billingCity"]').value

Give jQuery a try.

Let me know if this doesnt work.. My code may contain scemantic errors :)

Answer 3

As this page is part of the composition, they are actually 2 pages involve, the second VF page in my example is called: PortalSiteTemplate.

I have fixed it by adding the id to that page:

<apex:page controller="..." .language="en-US" id="temp">

Then I was able to use:

city = document.getElementById("{!$Component.temp.theForm.billingCity}").value;