Wednesday, November 3, 2010

Converting user input to uppercase

Converting the user input to upper case is a very common requirement for a typical web application. In this post, I'm sharing a simple solution for this use case using Java Script. Idea is to trigger the client side Java Script method using <af:clientListener> for 'keyUp' event. The below given code snippet may give you better idea on the implementation part.
<af:resource type="javascript">
  function toUpper(event) {
      var inputComp = event.getCurrentTarget();
      inputComp.setValue(inputComp.getSubmittedValue().toUpperCase());
  }
</af:resource>

<af:inputText value="#{bindings.CountryId.inputValue}"
    label="#{bindings.CountryId.hints.label}"
    required="#{bindings.CountryId.hints.mandatory}"
    columns="#{bindings.CountryId.hints.displayWidth}"
    maximumLength="#{bindings.CountryId.hints.precision}"
    shortDesc="#{bindings.CountryId.hints.tooltip}" id="it2"
    clientComponent="true">
 <f:validator binding="#{bindings.CountryId.validator}"/>
 <af:clientListener type="keyUp" method="toUpper"/>
</af:inputText>

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]

A glance at the implementation

This example contains test.jspx page to capture 'Country' master data. The attribute 'CountryId' is supposed to be in upper case always. The upper case conversion is achieved by triggering a custom Java Script method 'toUpper(...)' for keyUp event using <af:clientListener> tag.
To test this functionality, run the test.jspx and click on CreateInsert button which may let you to define new 'Country'. When you try key in the CountryId, you may notice that the keyed in letters are getting converted to upper case.

1 comment:

loperaja said...

thank you, your info was very helpful. Do you know if is there any way to convert the submitted text before adding it to a db register?