Solved

Force text to uppercase

D
Badge +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

icon

Best answer by sean_fiene 22 August 2017, 16:24

View original

13 replies

F
Userlevel 6
Badge +16

You can use short javascript code.

 

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

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

S
Badge +9

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

A
Badge +6

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

S
Badge +9

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

D
Badge +3

You guys nailed it, HUGE HELP all around

A
Badge +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. 

I
Badge +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?

I
Badge +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?

S
Badge +9

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();
});
});
I
Badge +3

Thanks Sean for the tip.

How do I find the CSS class for the selector?

1 Attachment
S
Badge +9

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

I
Badge +3

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

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings