Auto-convert field to uppercase
This is just a quick note for my future reference. I needed all items with the class “uppercase” to be converted to uppercase, and I thought it would work with just some CSS:
.uppercase { text-transform: uppercase; }
This makes the items appear uppercase, but when the page is posted it actually sends the values exactly as the user typed. They’d type in “lower“, it looks like “LOWER” on screen, but gets posted as “lower“.
In many cases I could just convert the value in my PL/SQL code, but in cases where I was using APEX tabular forms, I don’t know a simple way to intercept the values before the insert occurs.
To solve this I added this to the page’s Execute when Page Loads:
//the item looks uppercase but the internal value is still lowercase
$(document).on('change', '.uppercase', function() {
var i = "#" + $(this).attr("id");
$(i).val( $(i).val().toUpperCase() );
});
Or, even better, add this to the application’s global javascript file:
$(document).ready( function() {
$(document).on('change', '.uppercase', function() {
var i = "#" + $(this).attr("id");
$(i).val( $(i).val().toUpperCase() );
});
});
UPDATE: Interactive Grids
For interactive grids, you can still use this method. Put the class uppercase in the Advanced / CSS Classes attribute (Note: this is different to the Appearance / CSS Classes attribute!). I would also set the Column Filter / Text Case to Upper for good measure.
About Jeffrey Kemp
Application Designer & Developer at Oracle specialising in Oracle APEX (Application Express), Oracle SQL and PL/SQL. Oracle ACE Alumni ♠️. Piano player, father, husband, Christian. The views expressed on this blog are my own and do not necessarily reflect the views of Oracle.
Wayne T
21 April 2020 - 5:53 am
Would it not be simpler to use CSS as a custom attribute or CSS Class
style=”text-transform:uppercase”
Jeffrey Kemp
21 April 2020 - 1:17 pm
Hi Wayne,
It would be simpler, but only if you intend to apply this to one item in the whole application. Generally, “best practice” is to use a class and apply CSS attributes to the class.
The benefit to doing this using a class is that if you later need to make another change (e.g. add some visual styling), you only need to make the change in one place (your application’s global CSS file) rather than on every item. Also, if there’s a bug in the Javascript code you only need to fix it in one place.
Another benefit is that if you need this in an interactive grid, you don’t have lots of CSS attributes repeated for each instance of the item in the grid, thus potentially reducing the volume of HTML being downloaded.
Jeff
DAXESH LAIWALA
4 May 2020 - 3:00 pm
I tried it in grid but it is not working can you provide a sample application . or guide me how to do it. i am using apex 20.1
Jeffrey Kemp
10 May 2020 - 8:48 pm
Hi Daxesh,
Thanks for your note. I’ve updated the post with instructions for Interactive Grids. You need to set the Advanced / CSS Classes attribute to
uppercase.Jeff