X-Cart forums - Capitalise First Letters in Customer Info

Had a hard time trying to implement this mod in v4.1.8 so I started from scratch and made several changes to make it work.

1 - Create a file and call it capitalise2.js and place it in the /skin1 directory

Place the following code in this file:

Code:

function capitalizeMe(obj) {

        val = obj.value;

        newVal = '';

        val = val.split(' ');

        for(var c=0; c < val.length; c++) {

                newVal += val[c].substring(0,1).toUpperCase() +

val[c].substring(1,val[c].length) + ' ';

        }

        obj.value = newVal;

}

2) Then find xcart/skin1/customer/home.tpl

Add this code between <head> and </head>

Code:

Code:

<script language=JavaScript1.3 src="{$SkinDir}/capitalise2.js"></script>

3) Then locate the following templates in the xcart/skin1/main directory

register_personal_info.tpl
register_billing_address.tpl
register_shipping_address.tpl

also locate
xcart/skin1/help/contactus.tpl

Call the script by changing/adding this code to the end of the input fields:

|capitalize:true}" onChange="capitalizeMe(this);" />

For instance:
Change the existing code shown as commented code {* ...*} with the one under it in skin1/main/register_personal_info.tpl:

Code:

 

{* <input type="text" id="firstname" name="firstname" size="32" maxlength="32" value="{$userinfo.firstname}" /> *}

   <input type="text" id="firstname" name="firstname" size="32" maxlength="32" value="{$userinfo.firstname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="lastname" name="lastname" size="32" maxlength="32" value="{$userinfo.lastname}" /> *}

   <input type="text" id="lastname" name="lastname" size="32" maxlength="32" value="{$userinfo.lastname|capitalize:true}" onChange="capitalizeMe(this);" />

You can test it out now to see if it works by starting up X-Cart and clicking on the 'register' button located on the 'Authentication' menu.
In the 'First Name' box enter a name in lowercase, and then press the tab key or go to the 'Last Name' box and you can see that the first letter has changed to uppercase.
Test the 'Last Name' box also to make sure your code has been correctly entered.

Now also change the code in skin1/main/register_billing_address.tpl:

Code:

 

{* <input type="text" name="b_firstname" size="32" maxlength="32" value="{$userinfo.b_firstname}" /> *}

   <input type="text" name="b_firstname" size="32" maxlength="32" value="{$userinfo.b_firstname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" name="b_lastname" size="32" maxlength="32" value="{$userinfo.b_lastname}" /> *}

   <input type="text" name="b_lastname" size="32" maxlength="32" value="{$userinfo.b_lastname | capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_address" name="b_address" size="32" maxlength="64" value="{$userinfo.b_address}" /> *}

   <input type="text" id="b_address" name="b_address" size="32" maxlength="64" value="{$userinfo.b_address|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_address_2" name="b_address_2" size="32" maxlength="64" value="{$userinfo.b_address_2}" /> *}

   <input type="text" id="b_address_2" name="b_address_2" size="32" maxlength="64" value="{$userinfo.b_address_2|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_city" name="b_city" size="32" maxlength="64" value="{$userinfo.b_city}" /> *}

   <input type="text" id="b_city" name="b_city" size="32" maxlength="64" value="{$userinfo.b_city|capitalize:true}" onChange="capitalizeMe(this);" />

Since the register_billing_address.tpl file is still open, you can also change the zip code to make sure that it will always be upper case by changing the following code:

Code:

{* <input type="text" id="b_zipcode" name="b_zipcode" size="32" maxlength="32" value="{$userinfo.b_zipcode}" onchange="check_zip_code()"  /> *}

   <input type="text" id="b_zipcode" name="b_zipcode" size="32" maxlength="32" value="{$userinfo.b_zipcode}" onChange="this.value=this.value.toUpperCase();" onchange="check_zip_code();"  />

Do the same with skin1/main/register_shipping_address.tpl:

Code:

 

{* <input type="text" id="s_firstname" name="s_firstname" size="32" maxlength="32" value="{$userinfo.s_firstname}" /> *}

   <input type="text" id="s_firstname" name="s_firstname" size="32" maxlength="32" value="{$userinfo.s_firstname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="s_lastname" name="s_lastname" size="32" maxlength="32" value="{$userinfo.s_lastname}" /> *}

   <input type="text" id="s_lastname" name="s_lastname" size="32" maxlength="32" value="{$userinfo.s_lastname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="s_address" name="s_address" size="32" maxlength="64" value="{$userinfo.s_address}" /> *}

   <input type="text" id="s_address" name="s_address" size="32" maxlength="64" value="{$userinfo.s_address|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="s_address_2" name="s_address_2" size="32" maxlength="64" value="{$userinfo.s_address_2}" /> *}

   <input type="text" id="s_address_2" name="s_address_2" size="32" maxlength="64" value="{$userinfo.s_address_2|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="s_city" name="s_city" size="32" maxlength="64" value="{$userinfo.s_city}" /> *}

   <input type="text" id="s_city" name="s_city" size="32" maxlength="64" value="{$userinfo.s_city|capitalize:true}" onChange="capitalizeMe(this);" />

And this is the code to make the zip code all upper case:

Code:

{* <input type="text" id="s_zipcode" name="s_zipcode" size="32" maxlength="32" value="{$userinfo.s_zipcode}" onchange="check_zip_code()" /> *}

   <input type="text" id="s_zipcode" name="s_zipcode" size="32" maxlength="32" value="{$userinfo.s_zipcode}" onChange="this.value=this.value.toUpperCase();" onchange="check_zip_code();" />

And finally the code in skin1/help/contactus.tpl:

Code:

 

 

{* <input type="text" id="firstname" name="firstname" size="32" maxlength="32" value="{$userinfo.firstname}" /> *}

   <input type="text" id="firstname" name="firstname" size="32" maxlength="32" value="{$userinfo.firstname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="lastname" name="lastname" size="32" maxlength="32" value="{$userinfo.lastname}" /> *}

   <input type="text" id="lastname" name="lastname" size="32" maxlength="32" value="{$userinfo.lastname|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_address" name="b_address" size="32" maxlength="64" value="{$userinfo.b_address}" /> *}

   <input type="text" id="b_address" name="b_address" size="32" maxlength="64" value="{$userinfo.b_address|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_address_2" name="b_address_2" size="32" maxlength="64" value="{$userinfo.b_address_2}" /> *}

   <input type="text" id="b_address_2" name="b_address_2" size="32" maxlength="64" value="{$userinfo.b_address_2|capitalize:true}" onChange="capitalizeMe(this);" />

 

{* <input type="text" id="b_city" name="b_city" size="32" maxlength="64" value="{$userinfo.b_city}" /> *}

   <input type="text" id="b_city" name="b_city" size="32" maxlength="64" value="{$userinfo.b_city|capitalize:true}" onChange="capitalizeMe(this);" />

And the code for upper case zip codes:

Code:

{* <input type="text" id="b_zipcode" name="b_zipcode" size="32" maxlength="32" value="{$userinfo.b_zipcode}" onchange="javascript: check_zip_code(document.getElementById('b_country'), this);" /> *}

   <input type="text" id="b_zipcode" name="b_zipcode" size="32" maxlength="32" value="{$userinfo.b_zipcode}" onchange="this.value=this.value.toUpperCase();" onchange="javascript: check_zip_code(document.getElementById('b_country'), this);" />

All the modifications above were made on templates that had no previous modifications. Hope you like it and thanks to PhilJ for the inspiration.

- MoonDog -