I'm creating an interface using JSF, and I'd like the value of one text field to provide the default for a second if the second hasn't yet been set. The crucial code will look something like this:

<h:outputScript>
function suggestValue2() {
    var value2 = document.getElementById('value2').value;
    if (value2 == "") {
        document.getElementById('value2').value = document.getElementById('value1').value;
    }
}
</h:outputScript>

<h:inputText
    id="value1"
    onblur="suggestValue2();" />

<h:inputText
    id="value2" />

The problem is this doesn't actually work. The actual IDs of those two input elements get prefixed with some JSF-generated values, which tanks the getElementById calls. What's the best way for me to acplish what I'm trying to acplish here?

---

Edit: I should note that this is going to appear inside a posite ponent, which could wind up appearing multiple times on a single page. JSF dynamically setting the actual ID represents desired behavior.

I'm creating an interface using JSF, and I'd like the value of one text field to provide the default for a second if the second hasn't yet been set. The crucial code will look something like this:

<h:outputScript>
function suggestValue2() {
    var value2 = document.getElementById('value2').value;
    if (value2 == "") {
        document.getElementById('value2').value = document.getElementById('value1').value;
    }
}
</h:outputScript>

<h:inputText
    id="value1"
    onblur="suggestValue2();" />

<h:inputText
    id="value2" />

The problem is this doesn't actually work. The actual IDs of those two input elements get prefixed with some JSF-generated values, which tanks the getElementById calls. What's the best way for me to acplish what I'm trying to acplish here?

---

Edit: I should note that this is going to appear inside a posite ponent, which could wind up appearing multiple times on a single page. JSF dynamically setting the actual ID represents desired behavior.

• javascript
• jsf
• posite-ponent

Share Improve this question Follow edited Jan 18, 2013 at 16:35 BalusC 1.1m376376 gold badges3.7k3.7k silver badges3.6k3.6k bronze badges asked Jan 18, 2013 at 15:52 BlairHippoBlairHippo 9,6781111 gold badges5656 silver badges7878 bronze badges 1

• The easiest way to solve this issue would be using prependId="false" in the form. Another way would be finding it using the form id and the ponent id, like myFormId:value1, as suggested here. – Luiggi Mendoza Commented Jan 18, 2013 at 16:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Bind the ponent to the view,

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

so that you can just print its client ID elsewhere in the view by UIComponent#getClientId().

<h:outputScript>
    var input1 = document.getElementById('#{input1.clientId}');
    // ...
</h:outputScript>

---

As you mentioned that you're inside a posite ponent, it may be good to know that posite ponent's own client ID is already available via #{cc.clientId}. So the more remended alternative would be:

<cc:implementation>
    <h:outputScript>
        var input1 = document.getElementById('#{cc.clientId}:input1');
        // ...
    </h:outputScript>
    ...
    <h:inputText id="input1" ... />
    ...
</cc:implementation>

See also:

• Integrate JavaScript in JSF posite ponent, the clean way

Jsf uses a concept "naming containers" which says the id need not be unique within a provided container. Provided the container has an Id. So if you are not giving an Id to the container jsf appends the unpredictable values before the element. With id for container it bees containerid:elements id. And this can be used in JavaScript reliably