Postcode Formatting

[ROT]

Hello

I'm farily new to Actinic and still learning my way around, so I appologise if this is a stupid question.

I am trying to make the postcode field in checkout automatically format itself correctly.

I have tried following the instructions in this thread http://community.actinic.com/showthread.php?t=45487 but it doesn't seem to be working for me.

This is the layout code I have used,

<tr>
   <td>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt008Required%22%20%2f%3e" ><span class="actrequired"></actinic:block>
         <Actinic:Variable Name="InvoicePrompt008" encoding="html"/>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt008Required%22%20%2f%3e" />*</span></actinic:block>
   </td>
   <Actinic:LOCATION TYPE='INVOICEPOSTALCODE'>
   <td class="InvoiceField" >
      <input type="text" name="INVOICEPOSTALCODE" size="10" maxlength="50" value="<actinic:variable name="InvoicePostalCode" onblur="format(this, 'postcode')" selectable="false" />" />
      <actinic:variable name="InvoiceAddressLookup"/>
   </td>	
   
   </Actinic:LOCATION>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt016Visible%22%20%2f%3e">
   <Actinic:LOCATION TYPE='DELIVERPOSTALCODE'>
   <td class="DeliverField" >
		<actinic:block if="%3cactinic%3avariable%20name%3d%22DeliverPrompt008Visible%22%20%2f%3e">
	   <input type="text" name="DELIVERPOSTALCODE" size="10" maxlength="50" value="<actinic:variable name="DeliverPostalCode" onblur="format(this, 'postcode')" />" />
      <actinic:variable name="DeliveryAddressLookup" />
      </actinic:block>
   </td>
</actinic:block>
   </Actinic:LOCATION>
</tr>

As I said I am new to Actinic and not brilliant with code so simple instructions would be helpful.

Any help would be appreciated.

Thanks
Chris

[Duncan Rounding]

It is documented elsewhere but I use this to change the postocde field to uppercase (no additional js required):

<tr>
   <td>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt008Required%22%20%2f%3e" ><span class="actrequired"></actinic:block>
         <Actinic:Variable Name="InvoicePrompt008" encoding="html"/>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt008Required%22%20%2f%3e" />*</span></actinic:block>
   </td>
   <Actinic:LOCATION TYPE='INVOICEPOSTALCODE'>
   <td class="InvoiceField" >
      <input type="text" name="INVOICEPOSTALCODE" size="10" maxlength="50" value="<actinic:variable name="InvoicePostalCode" selectable="false" />" tabindex="NETQUOTEVAR:TABINDEXINVOICEPOSTALCODE" onblur="this.value=this.value.toUpperCase()" />
      <actinic:variable name="InvoiceAddressLookup"/>
   </td>
   
   </Actinic:LOCATION>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt016Visible%22%20%2f%3e">
   <Actinic:LOCATION TYPE='DELIVERPOSTALCODE'>
   <td class="DeliverField" >
		<actinic:block if="%3cactinic%3avariable%20name%3d%22DeliverPrompt008Visible%22%20%2f%3e">
	   <input type="text" name="DELIVERPOSTALCODE" size="10" maxlength="50" value="<actinic:variable name="DeliverPostalCode" />" tabindex="NETQUOTEVAR:TABINDEXDELIVERPOSTALCODE" onblur="this.value=this.value.toUpperCase()" />
      <actinic:variable name="DeliveryAddressLookup" />
      </actinic:block>
   </td>
</actinic:block>
   </Actinic:LOCATION>
</tr>

and also this code to change the other fields to capitalise the first letter of the words, as per this for address line1:

<tr>
   <td>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt004Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
         <Actinic:Variable Name="InvoicePrompt004"/>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt004Required%22%20%2f%3e" />*</span></actinic:block>
   </td>
   <td class="InvoiceField">
      <input type="text" name="INVOICEADDRESS1" size="30" maxlength="200" value="<actinic:variable name="InvoiceAddress1" selectable="false" />" tabindex="NETQUOTEVAR:TABINDEXINVOICEADDRESS1" onchange="this.value = capitalizeWords(this.value)" />
   </td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt016Visible%22%20%2f%3e">
   <td class="DeliverField">
      <actinic:block if="%3cactinic%3avariable%20name%3d%22DeliverPrompt004Visible%22%20%2f%3e"><input type="text" name="DELIVERADDRESS1" size="30" maxlength="200" value="<actinic:variable name="DeliverAddress1" />" tabindex="NETQUOTEVAR:TABINDEXDELIVERADDRESS1" onchange="this.value = capitalizeWords(this.value)" /></actinic:block>
   </td>
</actinic:block>
</tr>

the above capilisation requires the following js to be placed in the header:

<script language=JavaScript>
<!-- 
function capitalizeWords(string) { 
 var tmpStr, tmpChar, preString, postString, strlen; 
 tmpStr = string.toLowerCase();
 stringLen = tmpStr.length;
 if (stringLen > 0) 
  { 
  for (i = 0; i < stringLen; i++) 
   { 
   if (i == 0) 
    { 
    tmpChar = tmpStr.substring(0,1).toUpperCase(); 
    postString = tmpStr.substring(1,stringLen);
    tmpStr = tmpChar + postString; 
    } 
   else 
    { 
    tmpChar = tmpStr.substring(i,i+1);
    if (tmpChar == " " && i < (stringLen-1)) 
     { 
     tmpChar = tmpStr.substring(i+1,i+2).toUpperCase();
     preString = tmpStr.substring(0,i+1); 
     postString = tmpStr.substring(i+2,stringLen);
     tmpStr = preString + tmpChar + postString; 
     } 
    } 
   } 
  } 
 return tmpStr; 
}
// -->
</script>

[ROT]

Hi drounding

That works perfectly

Many thanks for your help.

Do you know if there's anyway to put the space in?

[Duncan Rounding]

...

Do you know if there's anyway to put the space in?

Not that I know of as it would depend on the particular postcode where the space would go. Royal Mail can 'read' postcodes without spaces anyway.

[ROT]

Not that I know of as it would depend on the particular postcode where the space would go. Royal Mail can 'read' postcodes without spaces anyway.

Like you say it's not important, I just thought it would be a nice touch if it could be done. I think the space always goes before the inbound part of the postcode which is the last 3 digits.

[Duncan Rounding]

I think that level of formatting would also require some input validation as well though. It could certainly be done in JavaScript.

It would also need to take into account the destination country.

[ROT]

I think that level of formatting would also require some input validation as well though. It could certainly be done in JavaScript.

It would also need to take into account the destination country.

It's not worth that sort of effort, I'm just pleased that it's now capitalising properly. Thanks

[Golf Tee Warehouse]

I use the code in this thread Capitalise Coupon Code (See posts #78 onwards), which capitalises the inputs and formats the postcode although doesn't take the country into consideration.

It looks very similar to the one that is now in the AUG that you pointed to but I have checked if there are any differences.

[Mike Hughes]

I love having the postcode formatted and the space properly inserted. It saves lots of wasted time with customers who insist on entering things like ab234xy. I still get them but only rarely now as most people have javascript enabled.

The code formatting could be adapted to work with international postcodes.

From what I can see: http://en.wikipedia.org/wiki/List_of_postal_codes the formatting just needs to be:

Remove any spaces, capitalise letters;
If the postcode ends in a letter:
---> Insert space before last 3 characters in the string;
Else:
---> Insert space after last letter in the string; (as some codes start with a country code)
Endif;

Mike