Automatically Set Title Case on One Page Checkout

Last modified by RodB on Wed, November 3, 2010 14:43
Source|Old Revisions  


In times gone past, i.e. the era of handwriting, people used to spell their name in title-case, i.e. ‘John Smith’. Nowadays people tend not to bother, it is ‘john smith’ (all in smalls) or, with ‘AOL IE6 users’, ‘JOHN SMITH’ (all in caps).

If building a customer database and having to dispatch orders, it is helpful to do it properly, i.e. to use title-case. This applies to names and addresses, but not to postcodes, these need to be in all-capitals.

By default the Magento templates do not have any validation to correct these minor data entry issues. Furthermore, it is not easy to edit fresh orders to tweak the names/addresses to the preferred title-case.

The one-page checkout templates can be amended to ensure that only tidy names/addresses are entered. This needs to be done for the billing as well as the shipping addresses, however, the method outlined here is only for the ‘billing’ address.

(This separate billing address was not required for the site this was developed on, if you allow your customers a different shipping address then the methods used here can be applied. Note, that this wiki article can be updated too, should you get title-case working for supplemental shipping addresses.)


Backup and open DOCROOT/app/design/frontend/default/THEME/template/customer/widget/name.phtml, look for the form input for the first name and add onChange=”Titlecase(this)”:

   <div class="input-box name-firstname">
        <label for="<?php echo $this->getFieldId('firstname')?>">
            <?php echo $this->__('First Name') ?>
            <span class="required">*</span>
        <br />
        <input type="text"
            id="<?php echo $this->getFieldId('firstname')?>"
            name="<?php echo $this->getFieldName('firstname')?>"
            value="<?php echo $this->htmlEscape($this->getObject()->getFirstname()) ?>"
            title="<?php echo $this->__('First Name') ?>"
            class="required-entry input-text"
            <?php echo $this->getFieldParams() ?> />

For the last name add the same onChange=”Titlecase(this)” line:

   <div class="input-box name-lastname">
        <label for="<?php echo $this->getFieldId('lastname')?>">
            <?php echo $this->__('Last Name') ?>
            <span class="required">*</span>
        <br />
        <input type="text"
            id="<?php echo $this->getFieldId('lastname')?>"
            name="<?php echo $this->getFieldName('lastname')?>"
            value="<?php echo $this->htmlEscape($this->getObject()->getLastname()) ?>"
            title="<?php echo $this->__('Last Name') ?>"
            class="required-entry input-text"
            <?php echo $this->getFieldParams() ?> />

If you are taking people’s middle names or titles then you can amend the file accordingly.

To make these changes work, see the bottom of this page for the javascript which will need to be included at the bottom of your template file, just before the closing </body> tag.

Address Fields

With the address fields only selected entries need to be ‘validated’. The email address can stay as it is, if using company name, this can be set to be kept ‘as is’.

Open [DOCROOT]/app/design/frontend/default/THEME/template/checkout/onepage/billing.phtml and add onChange=”Titlecase(this)” to where you need to be using title-case:

            <li><label for="billing:street1"><?php echo $this->__('Address') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('Street Address') ?>" name="billing[street][]" id="billing:street1" value="<?php echo $this->htmlEscape(
$this->getAddress()->getStreet(1)) ?>" class="required-entry input-text" onChange="Titlecase(this)" /></li>
<?php for ($_i=2, $_n=$this->helper('customer/address')->getStreetLines(); $_i<=$_n; $_i++): ?>
            <li><input type="text" title="<?php echo $this->__('Street Address '.$_i) ?>" name="billing[street][]" id="billing:street<?php echo $_i?>" value="<?php ech
o $this->htmlEscape($this->getAddress()->getStreet($_i)) ?>" class="input-text" onChange="Titlecase(this)" /></li>
<?php endfor ?>
            <li><div class="input-box">
                <label for="billing:city"><?php echo $this->__('City') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('City') ?>" name="billing[city]" value="<?php echo $this->htmlEscape($this->getAddress()->getCity()) ?>" class="required-entry input-text" id="billing:city" onChange="Titlecase(this)" /></div>
                <div class="input-box">
                <label for="billing:region"><?php echo $this->__('State/Province') ?> <span class="required">*</span></label><br/>
                <select id="billing:region_id" name="billing[region_id]" title="<?php echo $this->__('State/Province') ?>" class="validate-select" style="display:none">
                    <option value=""><?php echo $this->__('Please select region, state or province') ?></option>
                <script type="text/javascript">
                    $('billing:region_id').setAttribute('defaultValue',  "<?php echo $this->getAddress()->getRegionId() ?>");
                <input type="text" id="billing:region" name="billing[region]" value="<?php echo $this->htmlEscape($this->getAddress()->getRegion()) ?>"  title="<?php echo $this->__('State/Province') ?>" class="input-text" style="display:none" onChange="Titlecase(this)" />

Further down, for the postcode/zip we simply want to capitalise everything, rather than use the Titlecase function. To achieve this, we modify the onChange selector to onChange=”this.value=this.value.toUpperCase()”, e.g.:

                <label for="billing:postcode"><?php echo $this->__('Zip/Postal Code') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('Zip/Postal Code') ?>" name="billing[postcode]" id="billing:postcode" value="<?php echo $this->htmlEscap
e($this->getAddress()->getPostcode()) ?>" class="validate-zip-international required-entry input-text" onChange="this.value=this.value.toUpperCase()" /></div>

Now add a snippet of Javascript to the bottom of the .phtml file and save:

script type="text/javascript">
// a more sophisticated Function to convert words to title case
String.prototype.toTitleCase = function() {
    return this.replace(/([w&`'??"?.@:/{([<>_]+-? *)/g, function(match, p1, index, title) {
        if (index > 0 && title.charAt(index - 2) !== ":" &&
  ^(a(nd?|s|t)?|b(ut|y)|en|for|i[fn]|o[fnr]|t(he|o)|vs?.?|via)[ -]/i) > -1)
            return match.toLowerCase();
        if (title.substring(index - 1, index + 1).search(/['"_{([]/) > -1)
            return match.charAt(0) + match.charAt(1).toUpperCase() + match.substr(2);
        if (match.substr(1).search(/[A-Z]+|&|[w]+[._][w]+/) > -1 ||
            title.substring(index - 1, index + 1).search(/[])}]/) > -1)
            return match;
        return match.charAt(0).toUpperCase() + match.substr(1);

// Function to convert words to title case to use in the onchange method, which uses the above function
function Titlecase(obj) {
        obj.value = obj.value.toTitleCase();

Put some test orders together to make sure that the all-important checkout page functions correctly. If everything is going to plan then the orders should now come through with neatly presented names/addresses. The confirmation/invoice/delivery/newsletter emails should also be equally neat.