Skip to main content
Nintex Community Menu Bar
Solved

Force text to uppercase

  • Aug 18, 2017 8:21 PM UTC
  • 13 replies
  • 163 views
  • Translate All

Forum|alt.badge.img+3

How can I either have text entered in a form saved in upper case to my Share Point list or in my workflow when I create a email force the Item Properties of the workflow to upper case.  I have a css class on my form that makes everything go to uppercase.  But it does not save as such.

 

 

Thanks

Best answer by sean_fiene

Hi Damien, 

Fernando is right, you can use JavaScript to do this, but you will need to do the following:

In the Single Line Text box for email, go the control settings > Advanced >Store Client ID in JavaScript variable > Set to 'Yes'.
In Client ID JavaScript variable name, set the value to 'varControl'

Save the Settings and then open 'Form Settings' in the designer ribbon. Expand Custom JavaScript and paste the code from Fernando in his post.

NWF$(document).ready(function(){
NWF$('#' + varControl).change(function(){
this.value = this.value.toUpperCase();
});
});‍‍‍‍‍

Save your settings, and then test it out. You'll see the value change when you lose focus on the Single Line Text box.

Thank you,

Sean Fiene

View original

13 replies

Forum|alt.badge.img+16
  • Aug 21, 2017 2:53 AM UTC

You can use short javascript code.

 

  1. NWF$("#" + varControl).on('change', function(){  
  2.   this.value=this.value.toUpperCase();  
  3.   })  
Translate

Forum|alt.badge.img+3
  • Author
  • Aug 21, 2017 12:17 PM UTC

Thanks for the reply, would I put this on the form?  

Translate

Forum|alt.badge.img+9
  • Nintex Employee
  • Answer
  • Aug 22, 2017 2:24 PM UTC

Hi Damien, 

Fernando is right, you can use JavaScript to do this, but you will need to do the following:

In the Single Line Text box for email, go the control settings > Advanced >Store Client ID in JavaScript variable > Set to 'Yes'.
In Client ID JavaScript variable name, set the value to 'varControl'

Save the Settings and then open 'Form Settings' in the designer ribbon. Expand Custom JavaScript and paste the code from Fernando in his post.

NWF$(document).ready(function(){
NWF$('#' + varControl).change(function(){
this.value = this.value.toUpperCase();
});
});‍‍‍‍‍

Save your settings, and then test it out. You'll see the value change when you lose focus on the Single Line Text box.

Thank you,

Sean Fiene

Translate

Forum|alt.badge.img+6

Make sure you don't fire the 'change' event again when you set the uppercased value.

Translate

Forum|alt.badge.img+9
  • Nintex Employee
  • Aug 22, 2017 2:36 PM UTC

Hi Alexey,

Just tested this out. The function only fires once changing to uppercase and does not fire again. Great point though!

Thank you,

Sean Fiene

Translate

Forum|alt.badge.img+3
  • Author
  • Aug 22, 2017 2:44 PM UTC

You guys nailed it, HUGE HELP all around

Translate

Forum|alt.badge.img+6

I guess it's by jQuery's own merit. It tries to uppercase the uppercased value, compares to itself and seeing no change refuses to fire. If it were handcrafted vanilla js, a loop could happen causing some trouble. 

Translate

Forum|alt.badge.img+3

Hi 

I applied the script and changed setting as instructed,  but it only works for one box, after I set in the 2nd box the first box no longer work.  Is it because the two boxed are right next to each other no gaps in between?

Translate

Forum|alt.badge.img+3

Hi Sean,

I have 10 text boxes that need to force uppercase, but it only works if the box after the one setup with the setting does not have the setting.  e.g. Box A, Box B, Box C

Box A works if box B and C do not have this setting, box B works if Box C doesn't have this setting, Box C works if Box E does not have this setting.   

How can I get all these boxes work with this setting?

Translate

Forum|alt.badge.img+9
  • Nintex Employee
  • Apr 20, 2018 10:04 PM UTC

Hi Isabel,

This solution is using an ID as the selector of the element. An ID is going to be unique to the element, which is why it is only working for one text box. You'll have to change the selector of the text to look for a CSS Class as the one CSS class can be used against many elements. 

In the Control Settings of the text box, change the Control CSS class to the class you want to use:

Then add the following JavaScript:

 

NWF$(document).ready(function () {
NWF$('.clUpper').change(function () {
this.value = this.value.toUpperCase();
});
});
Translate

Forum|alt.badge.img+3

Thanks Sean for the tip.

How do I find the CSS class for the selector?

Translate

Forum|alt.badge.img+9
  • Nintex Employee
  • Apr 23, 2018 2:52 PM UTC

Hi Isabel,

No worries! On the controls I added to the form, there wasn't a CSS class. You can create one of your own with it's own naming convention. Just make sure to apply the Control CSS Class in the control settings. 

Thank you,

Sean

Translate

Forum|alt.badge.img+3

Sean, this solution works perfectly for multiple boxes, thanks again!

Translate