Thread: Ajax Zipcode registration page, try it out

Hey all,

this is the Ajax zipcode registration page, the idea behind it was to reduce the number of places customers has to enter info. We are testing to see how well it does in terms of City / State / Area Code.

Currently only US zipcodes are supported but we can plan to add Canada, UK, and other parts of Europe soon

https://www.allinkosher.com/createaccount.aspx

Nicely done. I like it.

Kudos. Very nice and smart addition to the registration page.

any sample code we can try out on our own page?

Sample code won't really help, we have a db of about 12,000 zip codes / cities / states that it runs off of. Its a simple querry that runs.

All the ajax is manuall javascript; no script manager or update panel.

The database shouldn't be all that hard to find. All the data is public domain anyway. After couple google queries I was able to find one and converted it to a sql query.

In case someone wants the database for this nice feature. I have attached it.

The javascript should be pretty simple to write to make the ajax query to some basic .NET page lookup-zip.aspx.

I will see what I can come up with...

Enjoy!

Chaz.

I just finished implementing this on a dev site.

These are the changes I made to createaccount.aspx

I inserted this javascript code just before the </form> tag.

Code:

<script type="text/javascript">
function zipLookup(zip){
if (zip.length == 5){
$.ajax({
    type : 'POST',
    url : 'zipLookup.aspx?zip=' + zip,
    contentType: "application/json; charset=utf-8",
    dataType : 'json',
    data : {},
    success : function(response){
    $('#BillingPhone').val(response.areacode + "-");
    $('#BillingCity').val(response.city);
    $('#BillingState').val(response.state);
    }    
    });
}}
</script>

Then I added "onkeyup" to the BillingZip input

Code:

<asp:TextBox ID="BillingZip" Columns="14" MaxLength="10" onkeyup="zipLookup(this.value);" runat="server" CausesValidation="true" ValidationGroup="createaccount" />

This essentially tests to see if the zip is 5 characters. Then posts to a custom .net page called zipLookup.aspx. Then parses the JSON response and changes the input fields.

I will post the zipLookup.aspx source shortly.

Chaz.

Ziplookup.aspx page source

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="zipLookup.aspx.cs" Inherits="zipLookup" %>

Ziplookup.aspx.cs page source

Code:

using System;
using System.Data;
using System.Web;
using AspDotNetStorefrontCore;
using System.Data.SqlClient;

public partial class zipLookup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string zip = Request.QueryString["zip"];        
        using (SqlConnection con = new SqlConnection(DB.GetDBConn()))
        {
            con.Open();
            using (IDataReader rs = DB.GetRS("select City, State, Areacode from zipCode with (NOLOCK) where zip = " + zip,con))
            {
                rs.Read();                
                Response.Write("{ \"areacode\" : \"" + DB.RSField(rs, "Areacode") + "\", \"state\" : \"" + DB.RSField(rs, "state") + "\", \"city\" : \"" + DB.RSField(rs, "city") + "\" }");
                
            }
        }
    }
}

I try it many ways but I got a parseerror back,

this is the code

Code:

 rs.Read()
                    Dim oBuilder As StringBuilder = New StringBuilder

                    oBuilder.AppendFormat("{0} : {1},", "areacode", DB.RSField(rs, "Areacode"))
                    oBuilder.AppendFormat("{0} : {1},", "state", DB.RSField(rs, "state"))
                    oBuilder.AppendFormat("{0} : {1}", "city", DB.RSField(rs, "city"))

Originally Posted by Jose Rojas

I try it many ways but I got a parseerror back,

this is the code

Code:

 rs.Read()
                    Dim oBuilder As StringBuilder = New StringBuilder

                    oBuilder.AppendFormat("{0} : {1},", "areacode", DB.RSField(rs, "Areacode"))
                    oBuilder.AppendFormat("{0} : {1},", "state", DB.RSField(rs, "state"))
                    oBuilder.AppendFormat("{0} : {1}", "city", DB.RSField(rs, "city"))

Thats a bummer. It appears you are also using VB which I do not know very well. I would suggest taking it down to basics. Your zipcode page just needs to display text.
Try
1. Using response.write to just write a string on page load.

2. Pulling data from the DB and writing it to the page on page load (not based on query string.

3. Passing the zip code parameter in the query string and pulling the related data from the DB.

Let me know at what point you receive the parser error. The error might just be with the stringbuilder you are using. Test it out and let me know. I will continue to help.

Chaz.

Originally Posted by Jose Rojas

I try it many ways but I got a parseerror back,

this is the code

Code:

 rs.Read()
                    Dim oBuilder As StringBuilder = New StringBuilder

                    oBuilder.AppendFormat("{0} : {1},", "areacode", DB.RSField(rs, "Areacode"))
                    oBuilder.AppendFormat("{0} : {1},", "state", DB.RSField(rs, "state"))
                    oBuilder.AppendFormat("{0} : {1}", "city", DB.RSField(rs, "city"))

Thats a bummer. It appears you are also using VB which I do not know very well. I would suggest taking it down to basics. Your zipcode page just needs to display text.
Try
1. Using response.write to just write a string on page load.

2. Pulling data from the DB and writing it to the page on page load (not based on query string.

3. Passing the zip code parameter in the query string and pulling the related data from the DB.

Let me know at what point you receive the parser error. The error might just be with the stringbuilder you are using. Test it out and let me know. I will continue to help.

Chaz.

Question, does this still work in v9x? I am using the multi-store edition, and do not see a way to enable the following step:

<asp:TextBox ID="BillingZip" Columns="14" MaxLength="10" onkeyup="zipLookup(this.value);" runat="server" CausesValidation="true" ValidationGroup="createaccount" />

This control does not appear to exist in createaccount.aspx, and instead seems to be populated from the following XML:

<aspdnsf:AddressControl ID="ctrlBillingAddress" runat="server"
OnSelectedCountryChanged="ctrlAddress_SelectedCoun tryChanged"
NickNameCaption='<%$ Tokens:StringResource, address.cs.49 %>'
FirstNameCaption='<%$ Tokens:StringResource, address.cs.2 %>'
LastNameCaption='<%$ Tokens:StringResource, address.cs.3 %>'
PhoneNumberCaption='<%$ Tokens:StringResource, address.cs.4 %>'
CompanyCaption='<%$ Tokens:StringResource, address.cs.5 %>'
ResidenceTypeCaption='<%$ Tokens:StringResource, address.cs.58 %>'
Address1Caption='<%$ Tokens:StringResource, address.cs.6 %>'
Address2Caption='<%$ Tokens:StringResource, address.cs.7 %>'
SuiteCaption='<%$ Tokens:StringResource, address.cs.8 %>'
CityCaption='<%$ Tokens:StringResource, address.cs.9 %>'
StateCaption='<%$ Tokens:StringResource, address.cs.10 %>'
CountryCaption='<%$ Tokens:StringResource, address.cs.53 %>'
ZipCaption='<%$ Tokens:StringResource, address.cs.12 %>'
Width="100%"
Visible="true"
FirstNameRequiredErrorMessage="FirstName Required!"
LastNameRequiredErrorMessage="LastName Required!"
CityRequiredErrorMessage="City Required!"
PhoneRequiredErrorMessage="Phone Number Required!"
Address1RequiredErrorMessage="Address1 Required!"
FirstNameReqFieldValGrp="createacccount"
LastNameReqFieldValGrp="createacccount"
PhoneNumberReqFieldValGrp="createacccount"
CityReqFieldValGrp="createacccount"
Address1ReqFieldValGrp="createacccount"
ZipCodeCustomValGrp="createacccount"
ShowValidatorsInline="true" />

As a follow up question, would the ZipCodeCustomValGrp attribute for the control allow this functionality?

Justin

I haven't started working with v9 yet. When I do I will post any solutions I come up with.


Chaz

Originally Posted by ChazAndChaz

Then I added "onkeyup" to the BillingZip input

This essentially tests to see if the zip is 5 characters. Then posts to a custom .net page called zipLookup.aspx. Then parses the JSON response and changes the input fields.

I will post the zipLookup.aspx source shortly.

I would do it onBlur... otherwise, you can't handle other country's Postal codes. In addition, if you don't strip spaces, you don't know if 5 characters includes a space in the beginning.

USER INPUT = EVIL!

I took a look this afternoon and it seems it is a easy fix. It actually doesn't require changing the form at all.

Use the code below in place of the current Javascript block.

Code:

 <script type="text/javascript" language="javascript">

         $(document).ready(function () {
             $('#chkShippingEqBilling').click(function () {
                 if ($('#chkShippingEqBilling').is(':checked')) {
                     $('#ShippingDetail').hide();
                 } else {
                     $('#ShippingDetail').show();
                 }
             });
             $('#ctl00_PageContent_ctrlBillingAddress_Zip').keyup(function () {
                 zipLookup($('#ctl00_PageContent_ctrlBillingAddress_Zip').val(), 'billing');
             });
             $('#ctl00_PageContent_ctrlShippingAddress_Zip').keyup(function () {
                 zipLookup($('#ctl00_PageContent_ctrlShippingAddress_Zip').val(), 'shipping');
             });
         });
         function zipLookup(zip, type) {
             if (zip.length == 5) {
                 if (type == 'billing') {
                     $.ajax({
                         type: 'POST',
                         url: 'zipLookup.aspx?zip=' + zip,
                         contentType: "application/json; charset=utf-8",
                         dataType: 'json',
                         data: {},
                         success: function (response) {
                             $('#ctl00_PageContent_ctrlBillingAddress_Phone').val(response.areacode + "-");
                             $('#ctl00_PageContent_ctrlBillingAddress_City').val(response.city);
                             $('#ctl00_PageContent_ctrlBillingAddress_State').val(response.state);
                         }
                     });                   
                 } else if (type == 'shipping') {
                     $.ajax({
                         type: 'POST',
                         url: 'zipLookup.aspx?zip=' + zip,
                         contentType: "application/json; charset=utf-8",
                         dataType: 'json',
                         data: {},
                         success: function (response) {
                             $('#ctl00_PageContent_ctrlShippingAddress_Phone').val(response.areacode + "-");
                             $('#ctl00_PageContent_ctrlShippingAddress_City').val(response.city);
                             $('#ctl00_PageContent_ctrlShippingAddress_State').val(response.state);
                         }
                     });                  
                 }
             }
         }
        </script>

Essentially the script is now looking for the shpping zip and billing zip text boxes once the page is loaded and then assigns the function to the KeyUp event.

I have it working on a dev box now. Please test it before going live.

Chaz.

Originally Posted by factorite

I would do it onBlur... otherwise, you can't handle other country's Postal codes. In addition, if you don't strip spaces, you don't know if 5 characters includes a space in the beginning.

USER INPUT = EVIL!

OnBlur would work, however, the database really only provides zips for us territories and canada. So it becomes moot.

As far as user input being evil, I couldn't agree more. The cool thing about this script is that it isn't a requirement. If the info they enter doesn't return any actual data it won't effect the user at all.

Chaz.

Great work Chaz, I'll try this on our installs.