Menu
Possible Duplicate:
Capitalize the first letter of string in JavaScript
This is may code so far. I would like the FIRST_Name and LAST_Name fields to capitalize the first letter and have all other letters small:
Also, I am unfamiliar with javaScript so I am not exactly sure what I am doing.
latest edit. What is wrong with this code?
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript" type="text/javascript">
<!--
function CheckForm()
formObj.FIRST_Name.value = titleCase(formObj.FIRST_Name.value);
formObj.LAST_Name.value = titleCase(formObj.LAST_Name.value);
function titleCase(str) {
var words = str.split(/\s+/);
for (var i=0; i<words.length; i++)
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
return words.join(" ");
}
{
var formObj = document.getElementById("Data");
var firstname = formObj.FIRST_Name.value;
var lastname = formObj.LAST_Name.value;
if(notEmpty(formObj.FIRST_Name, "Please enter your first name")){
if(notEmpty(formObj.LAST_Name,"Please enter your last name")){
if(titleCase(formObj.FIRST_Name)
return true;}}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
</script>
</HEAD>
<BODY>
<div style="background: #CCCC99">
<HR><FORM id="Data" onsubmit="return CheckForm()" action="post to server" method=post>
<P>First Name: <input type=text name=FIRST_Name maxlength=15 size=15>
Last Name: <input type=text name=LAST_Name maxlength=15 size=15></P>
<input type=submit value="Submit Products Registration Form" style="width: 220px"><input type=reset value="Reset">
</form>
</div>
</BODY>
</HTML>
599
In JavaScript, we have a method called toUpperCase() , which we can call on strings, or words. As we can imply from the name, you call it on a string/word, and it is going to return the same thing but as an uppercase. For instance: const publication = "freeCodeCamp"; publication[0].
Unfortunately in JavaScript, there isn't a capitalize or title case a string. So what we can is utilize toLowerCase() to make the entire string lower-cased and then uppercase the first letter. Convert the entire string to lower case.
Just include → style="text-transform:capitalize;" inside your input tag. Same solution as other answers.
Try this:
String.prototype.toCap = function()
{
return this.toLowerCase().replace(/^.|\s\S/g, function(str) {
return str.toUpperCase();
});
}
var firstname = "gob".toCap();
var lastname = "bluth".toCap();
alert(firstname + ' ' + lastname);
For those of us who are scared of regular expressions (lol):
function titleCase(str)
{
var words = str.split(" ");
for ( var i = 0; i < words.length; i++ )
{
var j = words[i].charAt(0).toUpperCase();
words[i] = j + words[i].substr(1);
}
return words.join(" ");
}
"don't know how to put it into my code"
Copy the titleCase() (or toTitleCase() or whatever you are calling it now) function into your script block, and then add the following code just before the if statements in your CheckForm() function:
formObj.FIRST_Name.value = titleCase(formObj.FIRST_Name.value);
formObj.LAST_Name.value = titleCase(formObj.LAST_Name.value);
That way at the point where the form is submitted the fields will be changed using your toTitleCase() function. (If you add the code before the if statements the fields will be changed regardless of whether the notEmpty() validations pass, which seems reasonable to me.)
(Incidentally, the firstname and lastname variable declarations can be deleted from the CheckForm() function because you don't ever use those variables.)
38
Try this code:
function toTitleCase(str){
var words = str.match(/\w*/g);
for(var i=0;i<words.length;i++)
words[i] = words[i][0].toUpperCase() + words[i].slice(1);
return words.join(' ');
}
toTitleCase('my name');
To uppercase a single string see How do I make the first letter of a string uppercase in JavaScript?.
If you want to to this on every word in the string, you will want to split the string into words, apply the ucFirst function on each of them and join them back together:
function titleCase(str) {
var words = str.split(/\s+/);
for (var i=0; i<words.length; i++)
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
return words.join(" ");
}
Or you can apply a regex on them, to match every first letter and replace them:
function titleCase(str) {
return str.replace(/\b\S/g, function(c){
return c.toUpperCase();
});
}
At your latest edit: You've got an syntax error in the third if-condition, it lacks a closing bracket. Also, you've inserted the titleCase code before the function body.
/* the titleCase function from above here */
function CheckForm() {
var formObj = document.getElementById("Data");
var firstname = formObj.FIRST_Name;
var lastname = formObj.LAST_Name;
firstname.value = titleCase(firstname.value);
lastname.value = titleCase(lastname.value);
return notEmpty(firstname, "Please enter your first name")
&& notEmpty(lastname, "Please enter your last name");
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
My personal view on this: Don't try to correct the names with JavaScript at all. You do it when the form is committed, and the user will see effects of this action only if he left one input empty and encounters the error message.
You need to do this anyway serverside (never trust user input / POST data, javascript could be disabled), so if you aren't familiar with JavaScript (or don't like it or whatever), just omit this "feature".
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
