Jump to content
Sign in to follow this  
Kristy1

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

: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. :D

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...