0

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>
  • first find out j_id0:j_id2 which element Ids. when you find give some name to those elements and after that use document.getElementById("{!$Component.FirstElement.SecondElement.theForm.billingCity}") – Ratan Paul Nov 14 '16 at 5:57
  • Ratan, that is what I am trying to do, but i cant find it, the define and composition doesnt allow id, I notice in between the define and the form a span is created – manza Nov 14 '16 at 6:57
  • I guess it will be your apex:page and apex:component tag – Ratan Paul Nov 14 '16 at 7:34
0

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);
}
  • The problem is that the page is adding an extra "id" between component and form so {!$Component.theForm} return null, please note that I state the id is rendering as j_id0:j_id2:theForm:billingCity and not as j_id0:theForm:billingCity, otherwise that would work – manza Nov 14 '16 at 2:30
  • then, use document.getElementsByClassName('form-control'); – Santanu Boral Nov 14 '16 at 2:33
  • updated my answer, it will work – Santanu Boral Nov 14 '16 at 2:35
  • did that solve your purpose? If so, then close the ques – Santanu Boral Nov 14 '16 at 15:46
  • It could solve but it is not the right way, in this sample was one field, but the form contains hundreds, I have found the issue and create an answer – manza Nov 29 '16 at 4:35
0

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 :)

  • HI that is pretty close but define doesnt allow adding an id, I have create an answer to close this question – manza Nov 29 '16 at 4:36
0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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