javascript converting user input to Title Case Capitalization

dvcrdu
dvcrdu used Ask the Experts™
on
Experts,

I need to convert user input entered into txtInput to Initial Caps For Each Word and display it in txtOutput in the following way:

1. use the split() method to split the words in the string into a words array

2. create a for loop that uses a 2nd split() method to split the elements of the words array into a 2nd array called characters array using the toUpperCase() method to convert the 1st element in the 2nd array to uppercase

3. use the join method() to rebuild the array of words in the text string

4. use a 2nd join() method to convert the array of words back into a single text string

5. btnConvert calls the javascript code that converts the user input

I am totally clueless and brain dead on how to do this.

Any help would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Case</title>


</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="529" height="233" border="15" cellpadding="5" cellspacing="5">
    <tr>
      <td width="477"><label for="txtInput">Enter Text To Convert To Initial Caps</label>:
        &nbsp; 
        &nbsp; &nbsp; <input type="text" name="txtInput" id="txtInput" tabindex="1" /></td>
    </tr>
    <tr>
      <td><label for="txtOutput">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Converted To Title Case:</label>        &nbsp; &nbsp; &nbsp; <input type="text" name="txtOutput" id="txtOutput" tabindex="2" /></td>
    </tr>
    <tr>
      <td>&nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <input type="submit" name="btnConvert" id="btnConvert" value="Convert" tabindex="3" />
      &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <label for="btnClear"></label>
      <input type="reset" name="btnClear" id="btnClear" value="Clear" tabindex="4" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
homework ?
leakim971Multitechnician
Top Expert 2014
Commented:
Split : http://www.w3schools.com/jsref/jsref_split.asp
Join : http://www.w3schools.com/jsref/jsref_join.asp
toUpperCase : http://www.w3schools.com/jsref/jsref_touppercase.asp
for loop : http://www.w3schools.com/JS/js_loop_for.asp
<script language="javascript">
	function convert() {
		var i = document.getElementById("txtInput");
		var o = document.getElementById("txtOutput");
//1. use the split() method to split the words in the string into a words array
		i = i.value.split(" ");
//2. create a for loop that uses a 2nd split() method to split the elements of the words array into a 2nd array called characters array using the toUpperCase() method to convert the 1st element in the 2nd array to uppercase
		for(var j=0;j<i.length;j++) {
			var characters = i[j].split("");
			characters[0] = characters[0].toUpperCase();
//3. use the join method() to rebuild the array of words in the text string
			i[j] = characters.join("");
		}
//4. use a 2nd join() method to convert the array of words back into a single text string
		o.value = i.join(" ");
//5. btnConvert calls the javascript code that converts the user input
		return false;
	}
</script>

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Multitechnician
Top Expert 2014
Commented:
the page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Case</title>
<script language="javascript">
	function convert() {
		var i = document.getElementById("txtInput");
		var o = document.getElementById("txtOutput");
//1. use the split() method to split the words in the string into a words array
		i = i.value.split(" ");
//2. create a for loop that uses a 2nd split() method to split the elements of the words array into a 2nd array called characters array using the toUpperCase() method to convert the 1st element in the 2nd array to uppercase
		for(var j=0;j<i.length;j++) {
			var characters = i[j].split("");
			characters[0] = characters[0].toUpperCase();
//3. use the join method() to rebuild the array of words in the text string
			i[j] = characters.join("");
		}
//4. use a 2nd join() method to convert the array of words back into a single text string
		o.value = i.join(" ");
//5. btnConvert calls the javascript code that converts the user input
		return false;
	}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="529" height="233" border="15" cellpadding="5" cellspacing="5">
    <tr>
      <td width="477"><label for="txtInput">Enter Text To Convert To Initial Caps</label>:
        &nbsp; 
        &nbsp; &nbsp; <input type="text" name="txtInput" id="txtInput" tabindex="1" /></td>
    </tr>
    <tr>
      <td><label for="txtOutput">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Converted To Title Case:</label>        &nbsp; &nbsp; &nbsp; <input type="text" name="txtOutput" id="txtOutput" tabindex="2" /></td>
    </tr>
    <tr>
      <td>&nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <input type="submit" onclick="return convert();" name="btnConvert" id="btnConvert" value="Convert" tabindex="3" />
      &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <label for="btnClear"></label>
      <input type="reset" name="btnClear" id="btnClear" value="Clear" tabindex="4" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Case</title>
<script type="text/javascript">
window.onload = function() {
	document.getElementById('btnConvert').onclick = function() {
		var input  = document.getElementById('txtInput');
		var output = document.getElementById('txtOutput');
		
		var words = input.value.split(' ');
		for(i=0; i<words.length; i++) {
			words[i] = words[i].substr(0,1).toUpperCase() + words[i].substr(1);
		}
		output.value = words.join(' ');
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="529" height="233" border="15" cellpadding="5" cellspacing="5">
    <tr>
      <td width="477"><label for="txtInput">Enter Text To Convert To Initial Caps</label>:
        &nbsp; 
        &nbsp; &nbsp; <input type="text" name="txtInput" id="txtInput" tabindex="1" /></td>
    </tr>
    <tr>
      <td><label for="txtOutput">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Converted To Title Case:</label>        &nbsp; &nbsp; &nbsp; <input type="text" name="txtOutput" id="txtOutput" tabindex="2" /></td>
    </tr>
    <tr>
      <td>&nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <input type="button" name="btnConvert" id="btnConvert" value="Convert" tabindex="3" />
      &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <label for="btnClear"></label>
      <input type="reset" name="btnClear" id="btnClear" value="Clear" tabindex="4" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

Author

Commented:
My apologies for not replying last nt -- helping my teenager with his term paper that was due today.

Thanks to all the experts, especially leakim971 for dividing up the code so that a newbie like me can understand it and also for the excellent links so that I can learn the language.

Again, thanks!
leakim971Multitechnician
Top Expert 2014

Commented:
You're welcome! Thanks for the points!
leakim971Multitechnician
Top Expert 2014

Commented:
@lsavidge check the previous questions of @dvcrdu
lol, misread :)

Lee
leakim971Multitechnician
Top Expert 2014

Commented:
np ;-))
I'm still chuckling at the way I'd read that comment ... been a long day !

Lee

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial