?
Solved

Convert ALL CAPS to Camel Case - Ajax/jQuery

Posted on 2012-04-06
8
Medium Priority
?
2,334 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…
Suggested Courses

765 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