Javascript For Capitalizing First Letters In Field

[zzhwvw01]

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.

[zzhwvw01]

Not sure if it matters or not, but I should probably add that I do not use the default caspio submit buttons. I hide the caspio buttons and have my own buttons in an html field at the end of the page.

[casyana]

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.

[zzhwvw01]

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>

[casyana]

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>

[joviermark]

Try this one....

 

function titleCaseReg(inStr)
{
 retrun inStr.replace(/^[a-z]/,function(str)
 {
  retrun str.toUpperCase()
 });
}
 

Full Source.......Capitalize the first letter

 

Mark

[wfadmin]

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

[Xiang]

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!

[wfadmin]

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

[Xiang]

Hi wfadmin,

 

It was my fault. I added "return false" for debagging and didn't delete this line when I posted the code.

I've edited the code, please try again.

[wfadmin]

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!

[Xiang]

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?

[pilotexpressions]

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

[munkitkat]

I also have the same question! Thanks you so much!

[Xiang]

Hello!

 

I have answered in another topic:

http://forums.caspio.com/index.php/topic/5600-capitalizing-all-letters/

 

Have a good day!

[TWIRED]

Hi,

This link goes nowhere

http://forums.caspio.com/index.php/topic/5600-capitalizing-all-letters/

 

Id like to use the same amended script.

thanks