Force initials to be all caps - working in form, but not correct in table

[roattw]

I have a basic text field in a table for a person's initials (Pt_initials).  I want them to appear capitalized in the table.  For that field on the DP form I put the following code in the Header to make it capitalized:

#InsertRecordPt_initials{
text-transform: uppercase !important;
}

It works on the DP form no problem.  But for some reason, some entries are coming to table lowercase.  I suspect the capitalized ones were made caps by the user entering the form.  

 

As always, thank you.

 

 

 

 

[CoopperBackpack]

Hello @roattw,

Currently, you use CSS code to capitalize the letters. This helps to display values capitalized, but the value itself is the one entered by the user. 

There are 3 options to change the value (you can use any of them):

1) Apply JavaScript code.

In the Footer section of the Submission form, disable the HTML editor and add the code:
 

<script>
document.addEventListener('DataPageReady', upperCaseHandler);

function upperCaseHandler() {
     const initialsField = document.querySelector('#InsertRecordPt_initials');

     initialsField.addEventListener('input', () => {
          initialsField.value = initialsField.value.toUpperCase();
     })
document.removeEventListener('DataPageReady', upperCaseHandler);
};
</script>

2) Use a Triggered Action.

The idea is to update the inserted record with the help of the corresponding SQL function.

 

3) Apply SQL function on the DataPage

•  Add a Virtual field that will be used to enter initials
  
  

 

• Set the real (data source) field to the Calculated value and use the UPPER() function to convert a value to upper-case.
  For example: UPPER('[@cbParamVirtual1]')
  
  

[roattw]

Thanks CooperBlack!  If I went JS I also have a second field (MD_initials).  How would I include that second field in the JS above for the single Pt_initials?

     const initialsField = document.querySelector('#InsertRecordPt_initials','#InsertedRecordMD_initials');

Also, safe to leave the uppercase CSS in place?

Which of those three options involves the least processing on the system/browser?

[CoopperBackpack]

Hello @roattw,

If you have 2 fields on the Submission Form, please add this code to the Footer:

<script>
document.addEventListener('DataPageReady', upperCaseHandler);

const ids = '#InsertRecordPt_initials, #InsertRecordMD_initials'; 

function upperCaseHandler() {

	document.querySelectorAll(ids).forEach(element => 
          element.addEventListener('input', (event) => {
		         element.value = element.value.toUpperCase();
	          }))
document.removeEventListener('DataPageReady', upperCaseHandler);
};
</script>

Please double-check the names of the fields. I added the fields with names: Pt_initials, MD_initials.

 

As for the performance, since it is just a simple function for 2 fields, all options should work fine. 

[roattw]

Thank you sir - success!