Question

I am trying to access the value of jsf outputText value using javascript but it throws undefined.Below is the code

    <ui:composition template="/template.xhtml">
            <ui:define name="head">
                <script type="text/javascript">
                    function sendDetails()
                    {
                        alert("am inside js");
                        var key=document.getElementById('editForm:key').value;
                        alert(key);
                    }
                </script>
            </ui:define>
    <ui:define name="body">
                <f:view>
                    <h:form id="editForm">
                        <h:outputLabel id="key" value="#{editController.details.clientId}" style="font-weight: bold" >
 <h:commandLink id="analytics" onclick="sendDetails()" value="View"></h:commandLink>

     </h:form>
     </f:view>
     </ui:define>
     </ui:composition>

When I click the command link it throws undefined!! I am not able to access the value of the output label.I checked view page source in firebug

<label id="editForm:key" style="font-weight: bold">

1e20bb95-753e-4252-b6d6-e109fa07171e

Which seems right..I checked with console.log(document.getElementById('editForm:key')) console.log(document.getElementById('editForm:key').value)which showed <label id="editForm:key"> undefined

How do I access the label/jsf outputtext value.I need a solution in javascript only

Answer 1

You can’t get h:outputLabel value with .value, because its being rendered into HTML label tag and you can’t get h:outputText value with .value, because its being rendered into HTML span tag.

Use .innerHTML instead for both tags.

You can find all its attributes with Firebug. Add this to watch

document.getElementById('editForm:key')

for example, here are more attributes that hold its text

.innerHTML
.outerText
.textContent