Jump to content

Change data entered into form fields to Uppercase


Recommended Posts

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)">

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 years later...

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

 

Link to comment
Share on other sites

  • 3 years later...

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.

Link to comment
Share on other sites

  • 1 year later...

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;

image.png.270d18e5fd4aaf5e7bfc12e866896c51.png

 

~JolliBeng

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...