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.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a simple form where I need the input box to have the name and id in it.

As the docs says, this:

<apex:inputText value="{!inputValue}" id="theTextInput"/> 

should output as

<input id="theTextInput" type="text" name="theTextInput" />

but it doesn't, it outputs as:

<input id="j_id0:main-form:theTextInput" type="text" name="j_id0:main-form:theTextInput" />

The form is wrapped in:

<apex:form id="main-form" styleClass="form-horizontal">

Is it possible to prevent that from happening?

share|improve this question
You can find your solution [Here][1] [1]:… – Pramod Kumar Jan 8 '13 at 16:31
up vote 3 down vote accepted

You should have added this recent update as an edit or comment to your question, not as an answer ;)

The gibberish is there to make sure elements are unique. Id field - because Ids should be unique, duh. Name - to make sure submitted form is deserialized properly (if you'd have a table with several items & mass edit capability you'd want to make sure that 7th element's Name field is mapped correctly).

Easiest way around it is to use your own input field instead of <apex:...> tag. If that's not an option - you could reference it with jQuery as $("page\\:block\\:form\\:theInput") (fully specified path + escaping).

Or use the ends-with selector: $("input[id$='theInput']")

share|improve this answer
Thank you for the detailed explanation. Not to go to far off topic ... do find this method better than using {!$Component.formName.theTextInput} or would you see them as equal? Thanks! – Brian Jan 8 '13 at 16:42
I don't like $Component, the guy is a bit clunky IMHO. Code that uses it has to sit next to the tag it refers to and I prefer to not sprinkle my JS all over the place but have it in one block on the bottom of the page... But that's a personal pref. really. "Ends-with" might be slow on bigger pages, explicit path will be always fastest but a bit painful if you rearrange the page heavily... Pick your poison ;) – eyescream Jan 8 '13 at 16:46
@eyescream, the note of $Component needing to sit next to the tag (a sibling) is inaccurate. If the $Component reference is used outside of a VF tag hierarchy it simply must be fully qualified in order to retrieve the element id. Using the 1st example: Best Practices for Accessing Ids script anywhere in the page: <script> var elId = '{!$Component.theForm.thePageBlock.theSection.theSectionItem.yourInputFieldIdHer‌​e}'; var $myInput = jQuery("[id='" + elId + "']"); </script> (and is not escaped) – Mark Pond Jan 8 '13 at 18:11
@MarkPond thx for the tip! I remember playing with it in the past and it was tricky to use so I gave up on $Component. Will retry next time I need JS :) I agree, having the path to be "calculated" server-side will mean less problems like this escaping required by jQuery. – eyescream Jan 9 '13 at 7:30

I have figure out how to solve for this in my custom jquery error checking. I just need to reference the name or id as {!$Component.formName.theTextInput}

Note this needs to be run after the field has been rendered to show up.

share|improve this answer

Not as far as I know. That gibberish it adds in there is used by Salesforce, likely for binding, styling and scripting.

share|improve this answer

Your Answer


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.