Using Client-side Functionality to Edit User Input

Using Client-side Functionality to Edit User Input - Force Uppercase

In WebSmart, you can use PML to perform server-side editing of data, whether it is input by the user or output to the browser. This article will explain a better method- using CSS.

Most legacy AS/400 applications store data in upper-case. If you want to allow a user to search for a field value, you can get the input from the browser and convert it to upper-case as follows:

HTML code fragment:

<input type="text" name="searchval" size="30" maxlength="30">

PML code fragment:

searchval = getparm("searchval"); 	// Get the input field from the user
searchval = upper(searchval);   		// Convert user input to upper case

There are several shortcomings to this solution:

The user sees the input as they type it as appearing in lower-case (unless they have caps-lock on, or they explicitly hit the shift key)
The server does the work of converting the string to upper-case (not a big deal, but it's a good practise to minimize use of server resources wherever possible).
It requires two lines of PML.

Using CSS, we can solve all these issues elegantly. Consider this HTML fragment:

<input type="text" name="searchval" size="30" maxlength="30"  style="text-transform:uppercase;">

We've simply added a style attribute to our input tag, with a "text-transform" specification for the value.

This addresses all the shortcomings of the PML approach:

The user sees the input they type as being in upper-case (no need to hit the shift key, it happens as they type). You can think of this as comparable to the default definition of input fields in display file DDS in the green-screen world.
The browser does all the work.
Our PML now only needs one line - the getparm function.

To add further elegance to this solution, you can define the text-transform style in a CSS class at the top of your HTML page (or in an external CSS file) instead. For example:

<style>
	.upper { text-transform:uppercase; } 
</style>

HTML fragment using this class:

 <input type="text" name="searchval" size="30" maxlength="30"  class="upper">

That's it!

Try It Here

Type anything you like into the two input text boxes below, so you can see this working.

Input field without text-transform:uppercase

Input field with text-transform:uppercase

Reference Material

You can find more information about the text-transformation CSS property at this address: www.w3.org/TR/REC-CSS2/text.html. This is the official standards site for web-related programming. The following is an extract from that page:

'text-transform'

Value:	capitalize \| uppercase \| lowercase \| none \| inherit
Initial:	none
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:	visual

This property controls capitalization effects of an element's text. Values have the following meanings:

capitalize: Puts the first character of each word in uppercase.
uppercase: Puts all characters of each word in uppercase.
lowercase: Puts all characters of each word in lowercase.
none: No capitalization effects.