Force Capitalization

[Kennedy]

Is there a way to convert text entered by the customer to be stored in all capital letters?

While I'm on the subject, is there a way to force telephone formatting, and remove/add dashs, spaces, periods?

[Jim]

Do a web search for routines to do these things.

For example I searched for "css to upper case text" and found this link http://www.w3schools.com/cssref/pr_text_text-transform.asp
and the css attribute text-transform: with thse properties
Value Description Play it
none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
inherit Specifies that the value of the text-transform property should be inherited from the parent element

Searching for "css to format phone number" didn't turn up anything but there where links to javascript mentioned. So there doesn't appear to be a css way to format phone numbers but it could probably be done with javascript. This site http://digitalbush.com/projects/masked-input-plugin/ mentions a way to use "Masked Input Plugin" for the JQuery javascript library to format a pnone number.

[ShopSite Lauren]

I am not sure if using CSS will work. It will only make the text look as if it is capitalized, but I don't think that it will carry that capitalization onto other screens. I would suggest adding JavaScript into the checkIt function in the cart. Below I have some basic JavaScript which capitalizes the Billing City field, and checks if the phone number field has exactly 10 characters and if it does, then the code adds dashes where appropriate. You would add this code into the checkit function text field under Commerce Setup > Order System > Checkout. Note, that these changes, capitalization and adding the dashes, will take effect when the customer clicks "submit order."

document.billing.City.value = document.billing.City.value.toUpperCase();

if (document.billing.Phone.value.length == 10){
num = document.billing.Phone.value;
parts = [num.slice(0,3),num.slice(3,6),num.slice(6,10)];
fNum = parts[0]+"-"+parts[1]+"-"+parts[2];
document.billing.Phone.value = fNum;
}

[Kennedy]

So the

document.billing.City.value = document.billing.City.value.toUpperCase();

could be copied, and modified for all values, i.e. name, etc...

Could I then add something like this

Code: Select all

document.billing.City.value = document.billing.City.value.replace(".","");

to remove a period if included?


Thank you very much for the quick response.

[Kennedy]

I'm not sure how it handles spaces, hopefully it uses the ; to end a line like normal js.


Here's what I came up with. BTW I'm doing this because our internal order processing software prefers all caps... I don't like it, but I can't change that.

Code: Select all

{
document.billing.First.value = document.billing.First.value.toUpperCase();
document.billing.Last.value = document.billing.Last.value.toUpperCase();
document.billing.City.value = document.billing.City.value.toUpperCase();
document.billing.Country.value = document.billing.Country.value.toUpperCase();
document.billing.Address 1.value = document.billing.Address 1.value.toUpperCase();
document.billing.Address 2.value = document.billing.Address 2.value.toUpperCase();
document.billing.Shipping Address 1.value = document.billing.Shipping Address 1.value.toUpperCase();
document.billing.Shipping Address 2.value = document.billing.Shipping Address 2.value.toUpperCase();
document.billing.Name On Card.value = document.billing.Name On Card.value.toUpperCase();

document.billing.First.value = document.billing.First.value.replace(".","");
document.billing.Last.value = document.billing.Last.value.replace(".","");
document.billing.City.value = document.billing.City.value.replace(".","");
document.billing.Country.value = document.billing.Country.value.replace(".","");
document.billing.Address 1.value = document.billing.Address 1.value.replace(".","");
document.billing.Address 2.value = document.billing.Address 2.value.replace(".","");
document.billing.Shipping Address 1.value = document.billing.Shipping Address 1.value.replace(".","");
document.billing.Shipping Address 2.value = document.billing.Shipping Address 2.value.replace(".","");
document.billing.Name On Card.value = document.billing.Name On Card.value.replace(".","");


if (document.billing.Phone.value.length == 10){
num = document.billing.Phone.value;
parts = [num.slice(0,3),num.slice(3,6),num.slice(6,10)];
fNum = parts[0]+"-"+parts[1]+"-"+parts[2];
document.billing.Phone.value = fNum;
}

[Kennedy]

When I put that code into Commerce -> Checkout Screen -> Javascript added at start of built-in CheckIt function:


The check box for 'Check here if billing and shipping are the same' stops working in my cart.

When I remove it, it works again.

I bet I'm missing a } or { somewhere but I can't figure it out.


http://secure.crystalclassics.com/cgi-crystalclassics/sb/order.cgi?storeid=*20baa64e5d11a75763fa194a6198911eabbc&function=show there's some items at the bottom of the page you can click on to add to cart.

The site is not live, no orders placed there will be processed.

[ShopSite Lauren]

the first { shouldn't be there...or should be closed after the first section.
Hope that fixes the problem.

[Kennedy]

I got it working. For anyone else who may be interested. Here's the code I used:

Code: Select all

document.billing.First.value = document.billing.First.value.toUpperCase();
document.billing.Last.value = document.billing.Last.value.toUpperCase();
document.billing.City.value = document.billing.City.value.toUpperCase();
document.billing.Country.value = document.billing.Country.value.toUpperCase();
document.billing.Address.value = document.billing.Address.value.toUpperCase();
document.billing.Address2.value = document.billing.Address2.value.toUpperCase();
document.billing.ShipAddress.value = document.billing.ShipAddress.value.toUpperCase();
document.billing.ShipAddress2.value = document.billing.ShipAddress2.value.toUpperCase();
document.billing.pay2.value = document.billing.pay2.value.toUpperCase();

document.billing.First.value = document.billing.First.value.replace(".","");
document.billing.Last.value = document.billing.Last.value.replace(".","");
document.billing.City.value = document.billing.City.value.replace(".","");
document.billing.Country.value = document.billing.Country.value.replace(".","");
document.billing.Address.value = document.billing.Address.value.replace(".","");
document.billing.Address2.value = document.billing.Address2.value.replace(".","");
document.billing.ShipAddress.value = document.billing.ShipAddress.value.replace(".","");
document.billing.ShipAddress2.value = document.billing.ShipAddress2.value.replace(".","");
document.billing.pay2.value = document.billing.pay2.value.replace(".","");


if (document.billing.Phone.value.length == 10){
num = document.billing.Phone.value;
parts = [num.slice(0,3),num.slice(3,6),num.slice(6,10)];
fNum = parts[0]+"-"+parts[1]+"-"+parts[2];
document.billing.Phone.value = fNum;
}

Put into the Commerce -> Order System -> Checkout -> Javascript to go before the Checkit function

Thank you much for the help.

[heather]

I know this is an old post... is your java script still working? I can't get it to work in my cart. Any more updates that you haven't shared yet?

Thanks,
Heather

[Kennedy]

It has been changed and now works great.

Code: Select all

/* Cycle through all form elements */
for(n=0; n<document.billing.elements.length; n++){
  /* only modify text fields */
  if(document.billing.elements[n].type == 'text'){
     /* Custom formatting for both phone text fields */
     if (document.billing.Phone.value.length == 10){
num = document.billing.Phone.value;
parts = [num.slice(0,3),num.slice(3,6),num.slice(6,10)];
fNum = parts[0]+"-"+parts[1]+"-"+parts[2];
document.billing.Phone.value = fNum;
     /* Exclude payment fields for credit card processing */
     } else if(document.billing.elements[n].className == 'payment'){
       //do nothing
     /* Exclude email fields */
     } else if(document.billing.elements[n].name=='email'||document.billing.elements[n].name=='email_again'){
       //do nothing
       /* Format text fields */
     } else{
           document.billing.elements[n].value = document.billing.elements[n].value.toUpperCase();
           document.billing.elements[n].value.replace(".","");
     }
  }

}


This forces uppercase on all text fields, then takes the phone number and if its 10 digits it formats it -
It also filters out periods and commas in the address fields. You can remove that part if you don't need it. Our order processing software doesn't like them in the fields.

[heather]

Thanks for the update, but I still can't get it to work. I have placed it in the "javascript added at start of built-in checkit function." Is this the correct place for it?

Thanks,
H

[Kennedy]

This is a copy/paste from my store Commerce --> Checkout Screen --> Javascript added at start of built-in CheckIt function:.

I'm not sure if you need Shopsite Pro for this to work... check with your hosting company and see if they can fix it for you. I have aanother script in that section so I might have missed an open or close bracket. The other script there notifies people if they try to ship to a PO Box using Fedex or UPS, and prompts them to choose a US Postal Service option, or change the ship to address. You will need to link to link to the latest jquery in your template for the second part to work.

Code: Select all

<script src="http://code.jquery.com/jquery-latest.js"></script>

Code: Select all

/* Cycle through all form elements */
for(n=0; n<document.billing.elements.length; n++){
  /* only modify text fields */
  if(document.billing.elements[n].type == 'text'){
     /* Custom formatting for both phone text fields */
     if (document.billing.Phone.value.length == 10){
num = document.billing.Phone.value;
parts = [num.slice(0,3),num.slice(3,6),num.slice(6,10)];
fNum = parts[0]+"-"+parts[1]+"-"+parts[2];
document.billing.Phone.value = fNum;
     /* Exclude payment fields for credit card processing */
     } else if(document.billing.elements[n].className == 'payment'){
       //do nothing
     /* Exclude email fields */
     } else if(document.billing.elements[n].name=='email'||document.billing.elements[n].name=='email_again'){
       //do nothing
       /* Format text fields */
     } else{
           document.billing.elements[n].value = document.billing.elements[n].value.toUpperCase();
           document.billing.elements[n].value.replace(".","");
     }
  }

}

if(button==162){

 var s_option = $(".shipmethod").parent().text();
 var so = s_option.split(':');
 var ship_method = jQuery.trim(so[1]);

 var po_regex = /^po.*box.*|^p\.o\..*box.*|p o box.*/i;
 var ship_regex = /^UPS.*|^FedEx.*/;

 if(ship_method.match(ship_regex)){

   var post_office_message = "We are unable to offer shipping to Post Office addresses for this order.  Please choose one of the US Postal Service options or change your shipping address.";

     if(po_regex.test(document.billing.ShipAddress.value)){
       alert(post_office_message);
       document.billing.ShipAddress.value = "";
       return(false);
     }

     if(po_regex.test(document.billing.ShipAddress2.value)){
       alert(post_office_message);
       document.billing.ShipAddress.value = "";
       return(false);
     }
 }
}

Maybe one of the mods here can help...