Capitalizing more than one word in form field

Hi, I found this code to capitalize the first letter of a word in a form field:
onchange="this.value=( this.value.charAt(0).toUpperCase()+this.value.substring(1).toLowerCase());"

Open in new window


However, that works great for fields like "First Name" and "Last Name" , where only one word is expected in the form field, but I have form fields that could have more than one word in the like "City" and get names like San Antonio, and the current script would return San antonio and I need to capitalize both words.
The code can be placed independently in the attribute section of each form field, so I just need a variant of the code to capitalize more than one word.

Thanks,

Jorge
Jorge BatresAsked:
Who is Participating?
 
Utkarsh KulkarniSr. Sw EngCommented:
text-transform:capitalize; makes the 1st letter of the word capital in text line.
e.g.
<html>
<head>
<style>
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="capitalize">this is some text.</p>
</body>
</html>

Open in new window



Output is "This Is Some Text.", which is you need.
0
 
chaitu chaituCommented:
function upperCase(str)
{
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
0
 
Utkarsh KulkarniSr. Sw EngCommented:
Instead of java script, you can use text-transform Property via css.

Ref - text-transform
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
KimputerCommented:
And here it's if you want to keep your code exactly as it is:

onchange="this.value=$(this.value.split(" ")).map(function() {return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();}).get().join(" ");"

Open in new window

0
 
Jorge BatresAuthor Commented:
This is what I'm looking for but for some reason is not affecting the field.

onchange="this.value=$(this.value.split(" ")).map(function() {return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();}).get().join(" ");"
0
 
KimputerCommented:
Ai, my mistake, I was testing it with jquery code. Is it possible you incorporate that somehow?
0
 
Jorge BatresAuthor Commented:
Kimputer, you are very close to what I need, if you look here: https://www.vacationpeople.com/encantada-resort-reservation-form.html I applied your code to the field First Name and I tried to enter more than one word in that filed just for testing. In the next field, Last Name, I have the original code I posted in the question, and it capitalizes the word but if I put two words like I would need in another field, it forces the second word to lowercase, so you have to be very close.
0
 
KimputerCommented:
Sorry, but I'm not close at all. I misled you because I was testing with this (thinking just using onchange in your source code would give the same result):

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>TEST	</title>
    <script src="jquery-1.11.0.min.js"></script>              
  </head>

  <body>
    	<input type="text" id="test" value="test"/>

<script>

	$('#test').change(function(){
		this.value=$(this.value.split(" ")).map(function() {return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();}).get().join(" ");
	  });
	
</script>
</body>
</html>

Open in new window


This actually works as you wanted. However, in your form, I can't even get that to work, somehow it doesn't take it at all. Even if it worked, it's still not the format you wanted it in. My apologies.
0
 
Utkarsh KulkarniSr. Sw EngCommented:
Hi,
Is there any issue if you apply css to these text (label) where css class has attribute "text-transform:capitalize;" ?
Or do you need in javascript only?
0
 
Jorge BatresAuthor Commented:
Thank you Utkarsh but I need this in JavaScript I guess because I would need to capitalize the first letter of more than one word. Kimpunter, I included Jquery Library in the page, so maybe we can try with that, but the current script you suggested before does not affect the field.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.