How can I know the id of a JSF component so I can use in Javascript

You need to use exactly the ID as JSF has assigned in the generated HTML output. Rightclick the page in your webbrowser and choose View Source. That's exactly the HTML code which JS sees (you know, JS runs in webbrowser and intercepts on HTML DOM tree).

Given a

<h:form>    <h:inputText id="emailAddresses" ... />

It'll look something like this:

<form id="j_id0">    <input type="text" id="j_id0:emailAddress" ... />

Where j_id0 is the generated ID of the generated HTML <form> element.

You'd rather give all JSF NamingContainer components a fixed id so that JSF don't autogenerate them. The <h:form> is one of them.

<h:form id="formId">    <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>

This way the form won't get an autogenerated ID like j_id0 and the input field will get a fixed ID of formId:emailAddress. You can then just reference it as such in JS.

var input = document.getElementById('formId:emailAddress');

From that point on you can continue using JS code as usual. E.g. getting value via input.value.

See also:

• How to select JSF components using jQuery?

Update as per your update: you misunderstood the blog article. The special #{component} reference refers to the current component where the EL expression is been evaluated and this works only inside any of the attributes of the component itself. Whatever you want can also be achieved as follows:

var input = document.getElementById('#{emailAddress.clientId}');

with (note the binding to the view, you should absolutely not bind it to a bean)

<h:inputText binding="#{emailAddress}" />

but that's plain ugly. Better use the following approach wherein you pass the generated HTML DOM element as JavaScript this reference to the function

<h:inputText onclick="show(this)" />

with

function show(input) {    alert(input.value);}

If you're using jQuery, you can even go a step further by abstracting them using a style class as marker interface

<h:inputText styleClass="someMarkerClass" />

with

$(document).on("click", ".someMarkerClass", function() {    var $input = $(this);    alert($input.val());});

Answer: So this is the technique I'm happiest with. Doesn't require doing too much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the id of a component from anywhere on your page, not just from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access any other component, not just the one that launched it.

This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.

1. Bind the component to a backing bean.

2. Reference the bound component wherever you want.

So here is a sample of how that can be done.

Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.

*.xhtml page

<script>  function myFunc() {    var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")                     alert("The email address is: " + inputText.value );  }</script><h:inputText binding="#{backBean.emailAddyInputText}"/><h:commandButton onclick="myFunc()" action="results" value="Next"/>

BackBean.java

UIInput emailAddyInputText;

Make sure to create your getter/setter for this property too.

Id is dynamically generated, so you should define names for all parent elements to avoid j_id123-like ids.

Note that if you use jQuery to select element - than you should use double slash before colon:

    jQuery("my-form-id\\:my-text-input-block\\:my-input-id")

instead of:

    jQuery("my-form-id:my-text-input-block:my-input-id")

In case of Richfaces you can use el expression on jsf page:

    #{rich:element('native-jsf-input-id')} 

to select javascript element, for example:

    #{rich:element('native-jsf-input-id')}.value = "Enter something here";