CODEWITHSUNDEEP
javascriptlowercasecapitalization
Shane
Shane

Reputation: 21

Javascript to make a text field have capital first letter and rest lower case

I am using a form software that has limited editing capabilities, however allows to add java script. Normally I would like to use PHP for something like this, but in this case i will have to use Javascript, which I have very little experience with.

Essentially on my landing page, I have a form in which people can submit. First Name Last Name Email etc.

the problem is - I mail merge the submissions, and when people enter their name as BOB SMITH or bob smith and not Bob Smith, it makes it look unprofessional when I send them this email. So I would like to add a javascript to this landing page that when the form submits, it converts the strings in the first_name text field and the last_name text field to have the first letter capitalized, and the rest lower case. Another problem is I do not think I can edit the form properties, so if at all possible this javascript would essentially go at the top of the page, and hopefully I dont have to edit the text field properties to activate it...any help would be greatly appreciated.

Thanks

Upvotes: 2

Views: 490

Answers (4)

Isaac Dozier
Isaac Dozier

Reputation: 86

Here is a Javascript Gist for building human-readable names I recently created that does just what you need plus a little extra.

I wont try to explain and instead, here are some examples:

//dan macdonald -> Dan MacDonald [call true]
//dAN mCdOnAlD  -> Dan McDonald [call true]
//paz y MIño    -> Paz y Miño [call true]
//BEN d'hosier  -> Ben D'Hosier
//sara ma'afala -> Sara Ma'afala

Include in your page like so:

<script src="https://gist.github.com/isaacdozier/5ae92c1da9622c77df4c9a70a9f9a849.js">
</script>

Or access the raw file at https://gist.githubusercontent.com/isaacdozier/5ae92c1da9622c77df4c9a70a9f9a849/raw/a81c877e77a3c0c3a795ac40bbf6721950cb2e05/read-names.js

Call the fuction like this:

capsFullName('john SMITH')

which outputs 'John Smith'

OR THIS

capsFullName('sara y gonzalez', true)

which outputs 'Sara y Gonzalez'

note: capsFullName('sara y gonzalez') outputs 'Sara Y Gonzalez'

Upvotes: 1

Mikl&#243;s Tusz
Mikl&#243;s Tusz

Reputation: 167

You could use the function below:

function capitalizeFirstLetter(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

It receives a parameter, and returns the first letter uppercased + the rest of your string lowercased.

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61212

If you have multiple names / words, this will get them all...

function getProperCase(sText) {
  return sText.replace(
    /([^\W_]+[^\s-]*) */g,
    function(s){
      return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();
    }
  );
}

Upvotes: 1

dkellner
dkellner

Reputation: 9896

I think it's almost like Will P said, but:

function ucFirst(s) {
    return s.substr(0,1).toUpperCase() + s.substr(1).toLowerCase();
}

function camelCase(s) {
    var a=s.split(" ");
    for(var i in a) a[i]=ucFirst(a[i]);
    return a.join(" ");
}

...because you need the last name Cameled too. (And now you can bind this to the change event. Or wherever you see fit.)

According to Will, the final version would look like:

$(function () {
    $("input").on("change", function () {
        $(this).val(camelCase($(this).val()));
    });
});

Hope I didn't mess up the brackets :)

Upvotes: 0

Related Questions