I need to render h:inputText
as following html output :
<input id="yourName" type="text" name="name" />
<input id="email" type="text" name="email" />
But h:inputText
renders the name attribute same as client id of the component. I want to specify the name
attribute myself, instead of putting client id in that, so that the input field can show meaningful autocomplete suggestions from previously submitted values for same field type on other sites. For e.g. when I use name="email"
with input field for email, user is shown suggestions of emails ids he submitted previously on other websites.
The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Note: Only form elements with a name attribute will have their values passed when submitting a form.
The name attribute specifies a name for an HTML element. This name attribute can be used to reference the element in a JavaScript. For a <form> element, the name attribute is used as a reference when the data is submitted. For an <iframe> element, the name attribute can be used to target a form submission.
name is the name that is used when the value is passed (in the URL or in the posted data). id is used to uniquely identify the element for CSS styling and JavaScript.
The HTML <input> name Attribute is used to specify a name for an <input> element. It is used to reference the form-data after submitting the form or to reference the element in a JavaScript. Attribute Values: It contains a single value name which describes the name of the <input> element.
You can't achieve it using <h:inputText>
. Its name is autogenerated by JSF based on the client ID (which is in turn based on component ID and all of its naming container parents).
You've basically 2 options to achieve the concrete functional requirement anyway:
If there are no other naming container parents, instruct the parent form to not prepend its ID:
<h:form prependId="false">
This will however cause <f:ajax>
to fail.
Use plain HTML elements instead of JSF components:
<input name="name" value="#{bean.name}" />
<input name="email" value="#{bean.email}" />
You only have to collect them yourself via @ManagedProperty
on a request scoped bean:
@ManagedProperty("#{param.name}")
private String name;
@ManagedProperty("#{param.email}")
private String email;
And you'll miss JSF builtin validation/conversion facility and ajax magic.
There's however a completely different alternative: use HTML5 <input type="email">
. This way the browser will autosuggest all previously entered emails on inputs of the very same type. This is not natively supported by <h:inputText>
. You can however use a custom render kit to get it to work, as answered in Adding custom attribute (HTML5) support to Primefaces (3.4):
<h:inputText type="email" ... />
Update as of JSF 2.2 you can finally easily declare passthrough attributes without needing a custom render kit.
<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText a:type="email" ... />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With