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?


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']")

  • 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.yourInputFieldIdHere}'; 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.


Have you seen this post:


Might provide you with an answer.


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

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.