Solved

Capitalizing more than one word in form field

Posted on 2014-04-29
10
177 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
ID: 40029445
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
ID: 40029459
Instead of java script, you can use text-transform Property via css.

Ref - text-transform
0
 
LVL 35

Expert Comment

by:Kimputer
ID: 40029506
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
ID: 40030024
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
ID: 40030155
Ai, my mistake, I was testing it with jquery code. Is it possible you incorporate that somehow?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Jorge Batres
ID: 40030208
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
ID: 40030714
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
ID: 40031836
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
ID: 40035150
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
ID: 40036980
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

920 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

17 Experts available now in Live!

Get 1:1 Help Now