How do I target specific inputs on a form fields to change output to Title Case?

Question

On my form I am trying to have specific output fields and their strings output as Title Case. May be worth noting, this form outputs to results on the same page. Here's a Fiddle demo of my form.

As you can see from it I have 3 input categories Name, City and Words, for this example I am trying to implement the Title Case script to just the 'Name" and City" output strings without it effecting the "Words" category. As I don't want to convert an ongoing sentence to Title Case.

I found a lot of discussion here on how to convert to title case. However I am having difficulty implementing this in to my form as I am still new to JavaScript. All the examples show the script, but not how to implement it in a form.

I was playing around with Greg Dean's top answer to try and target the specific inputs like so...

toTitleCase = function(str)
{
var name  = document.getElementById('name');
var city  = document.getElementById('city');

return str.replace(/\w\S*/g, function(txt){return 
txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

However this does not seem to be working.

Here's the HTMl:

<form>
<input type="text" class="text" id="name" placeholder="Name">
<br>
<input type="text" class="text" id="city" placeholder="City">
<br>
<textarea type="textarea" id="words" placeholder="Words" cols="70" rows="6">
</textarea>
<br>
<input type="button" value="Combine" onclick="convert()">
<br>
<div class="wrap"><span id="CharCountLabel1" class="counter"></span>
<textarea type="textarea" name="output" id="output" cols="70" rows="10" 
maxlength='' placeholder="Output"></textarea>
</div>
<br>
<button type="reset" onclick="ResetForm();" value="Reset 
form">Reset form</button>
</form>

And the rest of the script:

function convert() {
var name = document.getElementById("name").value;
var city = document.getElementById("city").value;
var words = document.getElementById("words").value;
//input = wordwrap(input, 70, true);
var output = "";

if(!document.getElementById("name").disabled){
output += "Name: " + name + "\n";
}

if(!document.getElementById("city").disabled){
output += "City: " + city + "\n";
}    

if(!document.getElementById("words").disabled){
output += "The words are... " + words + "\n";
}

document.getElementById("output").value = output;
}

CharacterCount = function(output,FieldToCount){
var myField = document.getElementById(output);
var myLabel = document.getElementById(FieldToCount);

var Chars =  myField.length;
if(!Chars){Chars =  "" ; };

var remainingChars =   Chars + myField.value.length
myLabel.innerHTML = remainingChars+""+Chars
}

setInterval(function(){CharacterCount('output','CharCountLabel1')},55);

How do I target the script to just the specified input fields? Please no jQuery, just JavaScript solutions.

Answer 1

While you have a fully-function toTitleCase() function, you're never actually calling it. All you need to do is run your name and city variables through your toTitleCase function when you go to output them to the page:

if (!document.getElementById("name").disabled) {
  output += "Name: " + toTitleCase(name) + "\n";
}
if (!document.getElementById("city").disabled) {
  output += "City: " + toTitleCase(city) + "\n";
}

To prevent the words from also being transformed, simply don't pass that variable to the function:

if (!document.getElementById("words").disabled) {
  output += "The words are... " + words + "\n";
}

A working demo of this can be seen here.

Hope this helps! :)