Solved

Capitalizing more than one word in form field

Posted on 2014-04-29
10
176 Views
Last Modified: 2014-05-02
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
0
Comment
Question by:Jorge Batres
  • 3
  • 3
  • 3
  • +1
10 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
Comment Utility
function upperCase(str)
{
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
0
 
LVL 7

Expert Comment

by:Utkarsh Kulkarni
Comment Utility
Instead of java script, you can use text-transform Property via css.

Ref - text-transform
0
 
LVL 35

Expert Comment

by:Kimputer
Comment Utility
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
 

Author Comment

by:Jorge Batres
Comment Utility
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
 
LVL 35

Expert Comment

by:Kimputer
Comment Utility
Ai, my mistake, I was testing it with jquery code. Is it possible you incorporate that somehow?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Jorge Batres
Comment Utility
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
 
LVL 35

Expert Comment

by:Kimputer
Comment Utility
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
 
LVL 7

Expert Comment

by:Utkarsh Kulkarni
Comment Utility
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
 

Author Comment

by:Jorge Batres
Comment Utility
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
 
LVL 7

Accepted Solution

by:
Utkarsh Kulkarni earned 500 total points
Comment Utility
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now