Convert string to title case not working, and populate div tag with input string all javascript

Question

I have been struggling with the following code. Basically I took the example Convert string to title case with JavaScript and am using that, I also have a code which takes the name and populates it into a div tag, however, it seems to move the text down, so for example when I type in john smith, I don't get John Smith for the capatalisation and then where it states 's fathers full name it does place the name there but then moves the rest of that text one line down, so 's fathers full name moves one line below john smith, can someone help me figure this out?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hello whirled</title>
</head>
<body>
    <h1>Bla Bla
    </h1>
    <form name="input" action="submit.php" method="post">
        <p>
            Other Text goes here
        </p>
        <p>
            How do you wish to be referred to informally?
             <input id="name1" type="text" name="groominame" onchange="toTitleCase(this.value); fathersName(this.value);" />
        </p>
        <div id="display1"></div>
        's full name:
        <input type="text" name="fname" />
        <noscript>
            <div>
                If you can see this then SCRIPTS are turned OFF on your machine and it won't work 
            </div>
        </noscript>
        <script type="text/javascript">
            function toTitleCase(str) {
                alert(str); //test
                return str.replace(/\w\S*/g, function (txt) {
                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                });
            }

            function fathersName(textarea) {
                alert(textarea); //test
                document.getElementById("display1").innerHTML = textarea;
            }

        </script>
    </form>
</body>
</html>

You are not doing anything with the return value of `toTitleCase`. You are converting the input somehow, but you are not using the output. — Felix Kling, Jun 15 '14 at 07:33
I am not sure what you mean Alexandre? The Fathers name works on my PC and it does replace the text in the DIV box, but I can't get it to capitalise. — Dino, Jun 15 '14 at 07:47
Ah I see @FelixKling King, I have to place the input into the output. I have changed the text to `toTitleCase` so instead of `return str...` I have `var name = str...` and then added `document.getElementById("name1").innerHTML = name;` but it doesn't seem to populate that input field name1. — Dino, Jun 15 '14 at 07:55
@Dino Maybe you should try `document.getElementById("name1").value = name;` — Akshay Takkar, Jun 15 '14 at 08:18
I use the `.value` and it worked @Akshay Takkar and I also used @mohamedrias however I see that I might have a lot of functions for similar code. — Dino, Jun 15 '14 at 08:48

mohamedrias · Accepted Answer · 2014-06-15T08:53:39.453

1

<div id="display1" style="float: left;margin: 3px 0px;"></div>

The above code will make it align properly with the text 's full name.

Your function is not working properly and also two functions are not needed.

function fathersName(ele) {
    var textarea = toTitleCase(ele);
    document.getElementById("display1").innerHTML = textarea;
}

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

so input tag changes to

 <input id="name1" type="text" name="groominame" onChange=" fathersName(this);"/>

If you just want to use toTitleCase in other fields, then use toTitleCase(this)

DEMO

edited Jun 15 '14 at 08:53

answered Jun 15 '14 at 07:41

mohamedrias

18,326
2
38
47

I need the field that was input to also change to uppercase once they leave the input field. So that is why I had them in a separate function. – Dino Jun 15 '14 at 08:03
So mohamedrias when I try the same function above to populate the input field it doesn't do it. Do you know why? – Dino Jun 15 '14 at 08:07
I have updated the answer, no need of two functions still :) http://jsbin.com/nabob/2/edit – mohamedrias Jun 15 '14 at 08:09
Instead of passing this.value, you need to pass only this in fathersName(this); – mohamedrias Jun 15 '14 at 08:11
I see, but I do need these functions to be separate as I use the convert to upper case on other input values. So for example I have another field called Brides Name so that needs to automatically be capitalised (first part of names) once they leave that field. Hope you understand. – Dino Jun 15 '14 at 08:20

score 0 · Answer 2 · answered Jun 15 '14 at 07:34

You need to first turn it into Upper case and then display it. You just return it to nowhere instead of keeping it in a variable or placing it in the right place. The div moves because at the end of a div there is a new line, if you want there not to be an effect use a span element.

Convert string to title case not working, and populate div tag with input string all javascript

2 Answers2