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.

Disable IE Compatibility Mode
SQL Problem: Merge record history tables

Comments

  1. Would it not be simpler to use CSS as a custom attribute or CSS Class
    style=”text-transform:uppercase”

    • 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

  2. 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

Leave a Reply

Your email address will not be published / Required fields are marked *