Solved

Convert ALL CAPS to Camel Case - Ajax/jQuery

Posted on 2012-04-06
8
2,028 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
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
0
 

Author Comment

by:dimsouple
Comment Utility
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:gurvinder372
Comment Utility
did you checked if they work as is? I mean, if you use them independently in a separate application, do they work?
0
 

Author Comment

by:dimsouple
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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 how to dynamically set the form action using jQuery.
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…

772 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

11 Experts available now in Live!

Get 1:1 Help Now