Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Convert ALL CAPS to Camel Case - Ajax/jQuery

Posted on 2012-04-06
8
Medium Priority
?
2,420 Views
Last Modified: 2012-12-10
I have an html form with a subject ALL CAPS from DB and I need to quickly convert it to camel case before saving back to Database.

<input id="subject" name="subject" Value="THIS SUBJECT IS ALL CAPS"  />

I need an ajax function that will convert $('#subject').val(); to Camel Case on the form

I would like to call it using a link on the form:
<a href="javascript:CamelCaseIt('subject')">Subject CaMel Case</a>

= = = =

I would also like to force a lower case action on $('#message').val(); for the users tho post the entire message ALL CAPS. If the function can replace 'i' with 'I' and capitalize the start of paragraphs automatically that would be more than great.

Hope you can help.
0
Comment
Question by:dimsouple
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 

Author Comment

by:dimsouple
ID: 37816785
I saw them before asking here. noticed the function but not clear on how to implement it for my use.

How to I implement, click a link, call the function, switch input to camel case on form?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 37816856
did you checked if they work as is? I mean, if you use them independently in a separate application, do they work?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:dimsouple
ID: 37818013
I notice the function but how do I call it?
please give me an example.

Like this?
<a href="javascript:CamelCase('subject')">convert to camel case</a>

I am not as smart as you think :)
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 37818209
just try this simple example

<script>
var string = "any string you want to camel case"; //
//call that method here and alert the result
</script>
0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 2000 total points
ID: 37818258
I just wipped up this for you.
It simply works:
<html>
<head>
<script>
function CamelCaseIt(it){
	var textin = document.getElementById(it).value;
	var textout = "";
	for(i in textin){
		if(i==0 || textin[i-1]==" ") textout+=textin[i].toUpperCase();
		else textout+=textin[i].toLowerCase();
	}
	document.getElementById(it).value = textout;
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" id="subject" size="40" name="subject" Value="THIS SUBJECT IS ALL CAPS"  />
<a href="javascript:CamelCaseIt('subject');">Subject CaMel Case</a>
<input type="submit">
</form>
</body>

Open in new window

0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37818262
Better still... if you wanted it to act 'as-you-type', do it like this:
<html>
<head>
<script>
function CamelCaseIt(it){
	var textin = document.getElementById(it).value;
	var textout = "";
	for(i in textin){
		if(i==0 || textin[i-1]==" ") textout+=textin[i].toUpperCase();
		else textout+=textin[i].toLowerCase();
	}
	document.getElementById(it).value = textout;
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" id="subject" size="40" name="subject" Value="THIS SUBJECT IS ALL CAPS"  onkeypress="CamelCaseIt('subject');"/>
<input type="submit">
</form>
</body>

Open in new window

...the only change to the previous version is that this gets called with every keypress.
But you might want to apply it right from the beggining on page load.
For that, you'll be safer either doing it in the server, or using jQuery in order to apply this function on $(document).ready
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37818442
Take a look at this jsfiddle.

The function is quite simple:

function properCase(value) {
    return value.replace(/\b(\w)(\w*)?\b/g, function() {
        return arguments[1].toUpperCase() + arguments[2].toLowerCase();
    });
}

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…
Suggested Courses

610 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