I think that actually we want a full last name, not just an initial, but close enough for the moment.
JavaScript cannot directly access backing bean properties, since the backing bean is on the server and the JavaScript runs on the client. What you can do, however, is render a backing bean property into the View and use JavaScript to retrieve the rendered value. You can do that in a number of ways, of which the hidden text approach is just one.
The trick when using JavaScript to retrieve control values from
JSF controls is to understand that a control has 2 distinct IDs. One is the simple ID (id="xxxx") that you code on your View Template. The other is the fully-qualified ID that actually gets generated in the HTML.
JSF has a concept called
naming containers. A Naming container is a tag that contributes to the fully-qualified ID of a generated HTML element. Naming containers include the h:form, the h:dataTable and panelGrid controls. DataTables also have a secondary name component, which is the zero-based row index so that each instance of a control in the various rows of a rendered table has its own unique ID. The "id" actually
must be unique, in fact, per the XML and XHTML specs.
So if I have a form with id="form1", a grid with id "grid1", and a hidden text control with id of "hideme", the actual ID that JavaScript wants to look for is "form1:grid1:hideme".
You can use your browser's "view page source" option to check the ID of the control. Note that if you used a control or naming container and didn't give it an explicit ID, one will be automatically generated - for example "form1:j_101:hideme". You don't want that, though, since the generated IDs can change without warning and break things.