Change data entered into form fields to Uppercase

[Kristy1]

I have a field I want the user to type in in all capital letters. I managed to put a clearing function where the words "TYPE IN ALL CAPS" appear in the box in faint gray and disappear when the box is clicked on, but I'm finding only about 60% of users are paying attention.

I've found javascript coding to use when writing form from scratch, but cannot make them work within Caspio. One cool example has letters convert to capitals as they are typed (LOVE THAT) but I don't know enough to convert it to use with Caspio bridge.

Any Ideas??

(From w3schools - site: http://www.w3schools.com/jsref/event_onkeyup.asp)
 

 

<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>

 

Enter your name: id="fname" onkeyup="upperCase(this.id)">

[nkamalan]

Hello, You can refer to a Caspio field in submission form in this format: "InsertRecordFIELDNAME". In the following code you need to replace FIELDNAME with the real field name you have. You can place it in the footer of the DataPage. 

<script type="text/javascript"> function upperCase() { var y = document.getElementById("InsertRecordFIELDNAME").value; document.getElementById("InsertRecordFIELDNAME").value = y.toUpperCase(); } document.getElementById("caspioform").onsubmit = upperCase; </script>

 Hope that helps. Regards, NKamalan

[londoncity]

Oh, wonderful I was looking for that code.

You can also use this line:

document.getElementById("caspioform").onmouseover= upperCase;

so on Mouseover it turns all to uppercase. :mrgreen:

[Kristy1]

:idea: OMG, I am so very very grateful - thanks ever so much!

I also changed the last line:

document.getElementById("caspioform").onkeyup = upperCase;

and now the letters change to capitals as they are typed.

[planet13]

Hi there,

 

This is very helpful and almost works on my end.  There are two things per below:

 

1. I am able to get the script to work (meaning lowercase text turns to uppercase when typing) while Previewing in Caspio.  But, it doesn't work when going to our website and testing it there.

 

2. How can you apply the script to a few fields in a form (not just one)?

 

Thanks!

Chris

 

[nightowl]

Hi planet13,

You can try this revised code:

<script type="text/javascript">
function uppercase(field)
{
    return function ()
    {
        field.value = field.value.toUpperCase();
    }
}

var fields = document.querySelectorAll('input[type="text"][id^="InsertRecord"]');
fields.forEach(
    function (field, index)
    {
        field.oninput = uppercase(field);
    }
);
</script>

Hope this helps.

[JolliBeng]

Hi, 

You can also add a simple CSS code on your Style to enforce Uppercase in the input fields of your Submission form. You just need to follow these steps:

• Edit the Style that you are using.
• On the DataPage Elements, go to Form Details -> Fields
• Click Source tab, Look for .cbFormTextField and add this code:

 

text-transform: uppercase;

 

~JolliBeng

[CoopperBackpack]

Hi,

Wanted to add the solution about how to add the UpperCase() function to the particular field/fields on the Submission form.

You may add the code to the Footer section of the DataPage (do not forget to disable the HTML editor before pasting):

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

const ids = '#InsertRecordFieldOneName, #InsertRecordFieldTwoName, #InsertRecordFieldThreeName'; //replace with your local field names

function upperCaseHandler() {

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

The only thing you need to change is to replace the field names that are listed in the const ids.

Please note that the id of the field on the Submission form has syntax as #InsertRecordYour_Field_Name

Maybe this post is helpful https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/

Also, it is possible to add the required number of ids (it can be 1, 2, 3, etc.)

[carynmacg]

Hello, I have a coder who has written script on the datapage to capitalize the first letter, but it is not saving it in the table as capitalized?  He has said that the scripts only work on the client side not the server side?   Will the scripts above work on the server side as well?  Thank you, Caryn

[Kurumi]

Hi @carynmacg - what is your script? This post might help:

Options mentioned above should be saved in the table. Can you provide a screenshot of sample result you were having?

[futurist]

Hi, 

I have a kind of similar scenario where I want to make the nth character in the user input to be uppercase and the rest of the letters to remain as they are. For this, I used Triggered Action

 

I used Variable to store the nth value I want to change to uppercase in the string. In this example, the fourth letter should be turned to uppercase. I also placed the characters BEFORE the nth character, as well as the characters AFTER the nth character, to have all of them concatenated in the Update block.

the output would look something like:

[CoopperBackpack]

Hi all, 

It looks like the same result of converting the nth character to uppercase can be achieved with the following trigger design:

 

1. The first part(line) gets the first 3 characters as is

2. The second part gets the 4th character and converts it to upper-case

3. The third part gets the string from the 5th character to the end of the string length as is.

Perhaps it can be helpful for someone.