I have the following code.

<h:form id="Form">
  <div class="pageBody">
    <h:outputLabel id="lbl" styleClass="formLabel" value="#{messages['lable.email']}:" />
    <s:button id="login" label="#{messages['login.button']}" actionBean="#{account}" actionMethod="login" />
  </div>
</h:form>

Here is the javascript

var obj = document.getElementById("Form:lbl");  //This works
var obj1 = document.getElementById("Form:login"); //This doesnt work

Keep in mind that <s:button> is a custom JSF Component.

Any help is appreciated

I have the following code.

<h:form id="Form">
  <div class="pageBody">
    <h:outputLabel id="lbl" styleClass="formLabel" value="#{messages['lable.email']}:" />
    <s:button id="login" label="#{messages['login.button']}" actionBean="#{account}" actionMethod="login" />
  </div>
</h:form>

Here is the javascript

var obj = document.getElementById("Form:lbl");  //This works
var obj1 = document.getElementById("Form:login"); //This doesnt work

Keep in mind that <s:button> is a custom JSF Component.

Any help is appreciated

• javascript
• jsf-2

1 Answer 1

It should work fine with custom ponents. Is it a custom ponent or a posite ponent? The problem you're having and the presence of JSF 2.0 tag indicates that it's actually a ponsite ponent. For the difference between custom tags, custom ponents and posite ponents, check When to use <ui:include>, tag files, posite ponents and/or custom ponents?

In this answer, I'll assume that it's indeed a posite ponent.

First of all, JavaScript works with HTML DOM tree, not with JSF ponent tree. JavaScript namely runs on webbrowser, not on webserver. JSF runs on webserver, produces a bunch of HTML and sends it to webbrowser. The document.getElementById() accepts only HTML DOM element ID's.

So, to find out which HTML DOM element ID the <s:button> has generated, you should open the JSF page in your webbrowser, do a rightclick and then View Source and locate the generated HTML element in the HTML source.

In case of your <s:button id="login"> posite ponent which in turn uses for example <h:mandButton id="button"> in the implementation, then it'll look like something like this:

<input type="submit" id="Form:login:button" />

A posite ponent by itself namely an NamingContainer ponent, which prepends the IDs like that. The <h:form> is also such a ponent. This enables you to use multiple posite ponents inside the same parent container.

You should use exactly that ID in your JavaScript function.

var button = document.getElementById("Form:login:button");