Predictive Sample #8

Phone Number Parse and Format

by dtsupport

HTML

<link rel="stylesheet" href="https://kleber.datatoolscloud.net.au/jquery19/themes/base/jquery.ui.all.css">
<script src="https://kleber.datatoolscloud.net.au/jquery19/jquery-1.9.1.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.core.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.widget.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.position.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.autocomplete.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.menu.js"></script>
<body>
    <div>
        <table>
            <tr>
                <td></td>
                <td><b>Method Parameters</b></td>
            </tr>            <tr>
			
			        <td>PhoneNumberCountryCode:</td>
                <td><input name="PhoneNumberCountryCode" id="inPhoneNumberCountryCode" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>PhoneNumberAreaCode:</td>
                <td><input name="PhoneNumberAreaCode" id="inPhoneNumberAreaCode" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>PhoneNumber:</td>
                <td><input name="PhoneNumber" id="inPhoneNumber" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>FormatType:</td>
                <td><input name="FormatType" id="inFormatType" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>StateRegion:</td>
                <td><input name="StateRegion" id="inStateRegion" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>DefaultAreaCode:</td>
                <td><input name="DefaultAreaCode" id="inDefaultAreaCode" value="" type="text" size="50"/></td>
            <tr>
            <tr>
                <td>RequestId:</td>
               ...

CSS

.ui-autocomplete-loading {
					background: white url('http://kleber.datatoolscloud.net.au/dt_processing_images/dt20x20.gif') right center no-repeat;
				}

JavaScript

$( function (){
	  $('#ProcessButton').click(function()
			{	
				var PhoneNumberCountryCode = $('#inPhoneNumberCountryCode').val();
				var PhoneNumberAreaCode = $('#inPhoneNumberAreaCode').val();
				var PhoneNumber = $('#inPhoneNumber').val();
				var FormatType = $('#inFormatType').val();
				var StateRegion = $('#inStateRegion').val();
				var DefaultAreaCode = $('#inDefaultAreaCode').val();
				var RequestId = $('#inRequestId').val();
				var RequestKey = $('#inRequestKey').val();
				var DepartmentCode = $('#inDepartmentCode').val();

            $.ajax({
                url: "https://kleber.datatoolscloud.net.au/KleberWebService/DtKleberService.svc/ProcessQueryStringRequest",
                dataType: "jsonp",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                data: {

                    Method: "DataTools.Parse.PhoneNumber.Au.ParseAndFormat",
                    PhoneNumberCountryCode: "" + PhoneNumberCountryCode,
                    PhoneNumberAreaCode: "" + PhoneNumberAreaCode,
                    PhoneNumber: "" + PhoneNumber,
                    FormatType: "" + FormatType,
                    StateRegion: "" + StateRegion,
                    DefaultAreaCode: "" + DefaultAreaCode,
                    RequestId: "" + RequestId,
                    RequestKey: "" + RequestKey,
                    DepartmentCode: "" + DepartmentCode,
                    OutputFormat: "json"
                },
                success: function (data) {
                    $.map(data.DtResponse.Result, function (item) {
                        $('#PhoneNumberCountryCode').val(item.PhoneNumberCountryCode);
                        $('#PhoneNumberAreaCode').val(item.PhoneNumberAreaCode);
                        $('#PhoneNumber').val(item.PhoneNumber);
                        $('#PhoneDescriptionLine1').val(item.PhoneDescriptionLine1);
                       ...