Jump to content
zzhwvw01

Javascript For Capitalizing First Letters In Field

Recommended Posts

I'm trying to force a form field so that the first letter of each word is capitalized. So I have this script that I just cannot get to work. I chatted briefly with caspio support to get to where I am now, but I still can't get it to work. Here is the script that I have in my footer (Origin_City is the name of my field):

<script type="text/javascript"> function displayResult() { document.getElementsByName("InsertRecordOrigin_City")[0].style.textTransform="capitalize"; } document.getElementById("caspioform").onsubmit = displayResult; </script> 

Here's the issue - If I use the script as is, it does not work at all. The letters don't capitalize on submit and the data does not get inserted to the db with capital letters. BUT, if I include onclick="displayResult()" in my submit button field, I can see the letters change on submit but the data still does not get saved to the db properly. Can anybody assist? Thanks in advance.

Share this post


Link to post
Share on other sites

You may use the following script instead:

<script type="text/javascript"> document.getElementById("FieldId").onchange = document.getElementsById("FieldId").style.textTransform="capitalize"; function capitalize() { var value = document.getElementById('FieldId').value; var newVal = ''; val = value.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' '; } document.getElementById('FieldId').value = newVal; } document.getElementById('caspioform').onsubmit=capitalize; </script>

It should capitalize letters while you are typing. So you always will have first letter capitalized. And function capitalize() will update value of the field while user submit the form, so value with capitalized first letter will be added to the table. Hope this helps.

Share this post


Link to post
Share on other sites

I don't know why, but my fields add on a random string of characters to the id each time the page loads, therefore I can't use getElementById, I have to use getElementByName. I altered your code to the following and it does capitalize the first letter as you type, which is great. However, it still gets saved to the database with lower case letters. I don't understand how that can happen when the text in the form field is correct...Suggestions?

<script type="text/javascript"> document.getElementsByName("InsertRecordOrigin_City").onchange = document.getElementsByName("InsertRecordOrigin_City")[0].style.textTransform="capitalize"; function capitalize() { var value = document.getElementsByName('InsertRecordOrigin_City').value; var newVal = ''; val = value.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' '; } document.getElementsByName('InsertRecordOrigin_City').value = newVal; } document.getElementById('caspioform').onsubmit=capitalize; </script>

Share this post


Link to post
Share on other sites

Hi zzhwvw01, The random ID number may be added if you are using an Auto Complete as form element. You may use getElementsByName() instead of getElementById(), but this method returns all elements with the specified name. So, to access first element, you need to add [0]. Try updated code:

<script type="text/javascript"> document.getElementsByName("InsertRecordOrigin_City")[0].onchange = document.getElementsByName("InsertRecordOrigin_City")[0].style.textTransform="capitalize"; function capitalize() { var value = document.getElementsByName('InsertRecordOrigin_City')[0].value; var newVal = ''; val = value.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' '; } document.getElementsByName('InsertRecordOrigin_City')[0].value = newVal; } document.getElementById('caspioform').onsubmit=capitalize; </script>

Share this post


Link to post
Share on other sites

Hi all, 

 

I'm working on an application and I've run into an issue in which many applicants enter their names with all caps instead of with proper capitalizacion (i.e. JOHN instead of John). I've used the guidance from above to adjust the script as follows - my variable is "name_last":

 

<script type="text/javascript"> document.getElementById("InsertRecordname_last").onchange = document.getElementById("InsertRecordname_last").style.textTransform="capitalize"; function capitalize() { var value = document.getElementById('InsertRecordname_last').value; var newVal = ''; val = value.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' '; } document.getElementById('InsertRecordname_last').value = newVal; } document.getElementById('caspioform').onsubmit=capitalize; </script>

 

This is working well when I test it by entering in all lowercase. However, when I try it by entering in all upper case, the script allows for this. The overall goal is to save into the dB names that are structured with proper capitalization (not all lowercase nor all uppercase). Looking for assistance, as I'm a javascript novice!

 

Thanks, 

 

AR

Share this post


Link to post
Share on other sites

HI Ar,

 

How are you doing?

 

I've rewrite the code, not it should work:

<script type="text/javascript">
function capitalize()
{
var fieldname = "YOUR_FIELD_NAME";
fieldname = "InsertRecord"+fieldname;
 
var value = document.getElementById(fieldname).value;
var newVal = '';
val = value.split(' ');
for(var c=0; c < val.length; c++)
   {
    newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length).toLowerCase() + ' ';
    }
document.getElementById(fieldname).value = newVal;
} 
document.getElementById('caspioform').onsubmit=capitalize;
</script>

Don't forget to change the YOUR_FIELD_NAME to the name of your field.

 

Happy Christmas! ;)

Share this post


Link to post
Share on other sites

Hi Xiang, 

 

Thanks so much for the response! This seems to work great, except for the following - when I fill in a value into the field name in an undesired format (i.e. JOHN or john), it changes to the correct format when I click the SUBMIT button (i.e. John). However, the data doesn't get submitted, and I am not taken to a new page. So, in other words, the format change happens upon clicking SUBMIT, but nothing else does. 

 

Any suggestions?

 

Thanks, 

 

AR

Share this post


Link to post
Share on other sites

Hi Xiang, 

 

I've used your revised version above and it works perfect! However, I want it to apply to two different fields - ie, the field name_last and the name_first. I've tried adding an HTML Block under each of the fields in the DataPage, and I'm having a hard time getting them to work simultaneously. In other words, one field will be capitalized correctly upon submission and the other will not. Here are the scripts I'm using:

 

first field (name_last)

<script type="text/javascript">
function capitalize()
{
var fieldname = "name_last";
fieldname = "InsertRecord"+fieldname;
 
var value = document.getElementById(fieldname).value;
var newVal = '';
val = value.split(' ');
for(var c=0; c < val.length; c++)
   {
    newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length).toLowerCase() + ' ';
    }
document.getElementById(fieldname).value = newVal;
document.getElementById('caspioform').onsubmit=capitalize;
</script>
 
second field (name_first)
<script type="text/javascript">
function capitalize()
{
var fieldname2 = "name_first";
fieldname2 = "InsertRecord"+fieldname2;
 
var value2 = document.getElementById(fieldname2).value;
var newVal2 = '';
val2 = value2.split(' ');
for(var c=0; c < val2.length; c++)
   {
    newVal2 += val2[c].substring(0,1).toUpperCase() + val2[c].substring(1,val2[c].length).toLowerCase() + ' ';
    }
document.getElementById(fieldname2).value = newVal2;
document.getElementById('caspioform').onsubmit=capitalize;
</script>
 
Any help is greatly appreciated!

Share this post


Link to post
Share on other sites

Hi AR,

 

When a user submits a Form only one "onsubmit" event happens, so only first script works. You can combine both checks in one script:

<script type="text/javascript">
function capitalize()
{
var fieldname = "name_last";
fieldname = "InsertRecord"+fieldname;

var value = document.getElementById(fieldname).value;
var newVal = '';
val = value.split(' ');
for(var c=0; c < val.length; c++)
   {
    newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length).toLowerCase() + ' ';
    }
document.getElementById(fieldname).value = newVal;

var fieldname2 = "name_first";
fieldname2 = "InsertRecord"+fieldname2;

var value2 = document.getElementById(fieldname2).value;
var newVal2 = '';
val2 = value2.split(' ');
for(var c=0; c < val2.length; c++)
   {
    newVal2 += val2[c].substring(0,1).toUpperCase() + val2[c].substring(1,val2[c].length).toLowerCase() + ' ';
    }
document.getElementById(fieldname2).value = newVal2;
} 
document.getElementById('caspioform').onsubmit=capitalize;
</script>

Does the code work now?

Share this post


Link to post
Share on other sites
<script type="text/javascript"> document.getElementsByName("InsertRecordOrigin_City")[0].onchange = document.getElementsByName("InsertRecordOrigin_City")[0].style.textTransform="capitalize"; function capitalize() { var value = document.getElementsByName('InsertRecordOrigin_City')[0].value; var newVal = ''; val = value.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' '; } document.getElementsByName('InsertRecordOrigin_City')[0].value = newVal; } document.getElementById('caspioform').onsubmit=capitalize; </script>

How do I change this script if I want all the letters to be capitalized? Furthermore, this field has a confirmation field that I would like to be capitalized, as well. If it also makes a difference, my field will use both letters and numbers.

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

×
×
  • Create New...