1

I've looked for an hour on Stackoverflow and had no luck unfortunately as I can't apply it to my circumstances. I'm not a coder, so please kindly tailor your response to my code. Upon our e-commerce website, buyers are entering their address and name all in lower case letters. For various reasons, we don't want this and want the data STORED with each word capitalised (therefore the CSS of text-transform) won't work for the back-end.

Supposing that the field name is:

<input type="text" value="" name="FormField[1][1]" id="FormField_1" class="Textbox Field200 FormField">

What do I need to add to the above code and what do I need to put in the section to get every word beginnging with a capital?

Thank you very much.

Jack
  • 96
  • 12
  • There is an answer for that here: http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript/196991#196991 – Jay Jul 29 '12 at 12:30
  • Thank you but where do I put it (in the head section and wrap the JS tags around the code) and do I need to change anything for the code I gave in my original post? – Jack Jul 29 '12 at 13:30

3 Answers3

1

Actually, sorry now that I think about it, you should do this on the server-side. So more information is needed to tell us what language you're using on the server-side (e.g. php, C#, etc.). The code you provided is HTML which is on the client-side, meaning that you wouldn't really process the text (user's details) there.

I'm sure that if you tell us what the server-side code is, a lot more people will provide input.

EDIT The process flow looks like this:

Client-side form   ->  Server-side processing -> Database storage
+---------------+          +----------+          +------------+
|   Name: ted   |    ->    | ted->Ted |    ->    | Name: Ted  |
+---------------+          +----------+          +------------+

EDIT 2 Let's say that the example field you posted was a first name. This is not tested so I'm not sure if it works:

$first_name = ucwords($_POST["FormField[1][1]"]);
// $_POST gets the value from the form with the 'name' attribute as 'FormField[1][1]'
// ucwords() is a php function to capitalise the first letter of each word in a sentence.
Jay
  • 558
  • 1
  • 7
  • 23
  • Is there not a simple way on the client page though that after the user clicks outside of the textbox, it checks that every word is capitalised or does it while the client is typing on the new word? Thank you. – Jack Jul 29 '12 at 14:21
  • To be honest, I'm not too experienced in Javascript so I can't help you much there. – Jay Jul 29 '12 at 14:26
  • Thanks for your edited comment. I don't want to start delving into the PHP code itself. Can someone please say if it is possible to call some javascript code from the HTML? Please let me know. – Jack Jul 29 '12 at 14:27
  • I added the *javascript* tag to your question so that you may get a better response. You might want to consider updating your original question to mention that you want a Javascript solution whereby when a user clicks out of the text box, the text is updated to capitalised first letters. – Jay Jul 29 '12 at 15:05
1

Since you didn't get an answer here, I thought I'd give this a shot.

First, you need to use the Javascript onblur() function to detect when the user has clicked away from the input box.

 <input type="text" onblur="upperCaseFirstLetters(this.id) value="" name="FormField[1][1]" id="FormField_1" class="Textbox Field200 FormField"">

The onblur() calls the upperCaseFirstLetters() function. this.id within the brackets of the that function is getting the id of the text box, so that you can mainpulate the text contained within.

Last, you need to create the function in script tags.

<head>
<script type="text/javascript">
    function upperCaseFirstLetters(elm) {
        var myTextObject = document.getElementById(elm);
        myTextObject.value = myTextObject.value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }
</script>
</head>

The input box's element is stored in the variable myTextObject, by getting the element by its id. myTextObject.value is the actual text in the input box. So you set the first letter of each word to uppercase using the function that I initially linked you to.

Community
  • 1
  • 1
Jay
  • 558
  • 1
  • 7
  • 23
  • Thank you very much for your response. I have this as the code but not sure if it right. I wasn't sure exactly of which sections to change i.e what is specifc to calling the input field and what's actually part of the code. What do you reckon of the below please? `` – Jack Aug 01 '12 at 23:22
  • `` – Jack Aug 01 '12 at 23:22
1
<script type="text/javascript"> 

function upperCaseFirstLetters(ABC123) {
    var myTextObject = document.getElementById(ABC123);
    myTextObject.value = myTextObject.value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

}


 <input type="text" class="Textbox Field150 InitialFocus" onblur="upperCaseFirstLetters(this.id)" name="login_email" id="login_email">

You must use exactly this line of code in each input

onblur="upperCaseFirstLetters(this.id)"

The function does not need to modified. As long as you include the above line of code in the input, the function will work.

Jay
  • 558
  • 1
  • 7
  • 23