Format Phone Number

[doakh]

Currently there is no formatting for a customer phone number when filling out the form on the OCST page.

<div class="&mvte:global:ShipPhone_Row;">
   <label class="required" for="ShipPhone">Phone Number *</label>
   <input type="text" name="ShipPhone" id="ShipPhone" value="&mvte:global:ShipPhone;" class="textfield" />
  </div>


<div class="&mvte:global:BillPhone_Row;">
   <label class="required" for="BillPhone">Phone Number *</label>
   <input type="text" name="BillPhone" id="BillPhone" value="&mvte:global:BillPhone;" class="textfield" />
  </div>

The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don't break it into separate fields, don't force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes.

Would I format his through the 'global variable?' Do I need to edit a module.....Component Module Code: cmp-mmui-invc-custfields?
If so, do I edit the module using the complier, or purchase a module?

Thanks,
Doak

[Bruce - PhosphorMedia]

Re: Format Phone Number

If its just for customer display, I'd try to do it in SMT code. Something like (not tested converted from mivascript)

	<mvt:assign  name="l.max" value="len(g.ShipPhone)" />
	<mvt:assign  name="l.count" value="'1'">

	<mvt:while expr="l.count LE l.max">
		<mvt:assign  name="l.char" value="substring( l.text, l.count, 1)">
		<mvt:comment> if character is digit pass it through </mvt:comment>
		<mvt:if expr="isdigit(l.char)">
			<mvt:assign  name="l.newPhone" value="l.newPhone $ l.char" />
		</mvt:if>
		<mvt:assign  name="l.count" value="l.count + 1 "/>
	</mvt:while>


	<mvt:comment> format the phone number </mvt:comment>
	<mvt:if expr="len(l.newPhone GE 11)">
		<mvt:assign name="l.area" value="substring(l.newPhone, 1, 3)" />
        <mvt:else>
        	<mvt:assign name="l.area" value="''" />
        </mvt:if>
        
	<mvt:assign name="l.prefix" value="len(l.newPhone, 4, 6)" />
	<mvt:assign name="l.remain" value="len(l.newPhone, 7, 11)" />
	
	
	<mvt:assign name="g.ShipPhone" value="'('$l.area$') '$l.prefix$' - '$l.remain" />

of course, if dealing with international numbers...you have to do a lot more testing...

personally, I'd hope to replace the 'g.shipPhone' with a juery/javascript routine that just corrected (and tested) the format AS they entered.

[doakh]

Re: Format Phone Number

Thanks, I 'll let you know how it goes.

[Bruce - PhosphorMedia]

Re: Format Phone Number

yea, if you ferret out any typos, etc...post it back in case someone else needs/wants it.

(as I said, this is copied from what we do in a custom mivascript module to condition phone numbers (vendor needed it in a specific format...so, there could be small errors.