Question

I'm trying to create a form that pops-up an error when people insert a specific zip code or range of zip codes.

For example:

If a potential lead fills out a form and enters a Washington state zip code I'd then want an error to pop-up to say we don't offer the product in that state.

I've search Google and Stackoverflow but still haven't found a working example of code... I've seen ones that are similar but not exactly what my example says.

the example I'm looking for could be in javascript or jquery

Was it helpful?

Solution

Considering an input element with the ID of zipCode

<input id="zipCode" name="zipCode" />

We can capture the value of it by doing something like

var zipCode = $("#zipCode").val();

Considering an array built like...

var acceptableZipCodes = ["53782", "11709", "97035", "86531"]; 

We can test to see if the value of zipCode is within the array, if it's not, we'll return an alert.

if($.inArray(zipCode, acceptableZipCodes)){
  //do nothing, or do whatever you want
  //we have a return true here.
}else{
  alert("Sorry. we don't offer products in that state.");
}

Now, we should probably put our code within an event. Let's use the keyup function, but because we don't want to check every value, we'll check on only the 5th keyup.

var acceptableZipCodes = ["53782", "11709", "97035", "86531"]; 
$("#zipCode").live('keyup', function(){
   var zipCode = $(this).val();
   if(zipCode.length >4){
     if($.inArray(zipCode, acceptableZipCodes)){
       //do nothing, or do whatever you want
       //we have a return true here.
     }else{
       alert("Sorry. we don't offer products in that state.");
     } 
   }
});    

OTHER TIPS

You may be better off testing for zip codes you do support...

function zipToState(zip){
    var state, i= 0, next, statezips= [
        [1000, 2792, 'MA'], [2800, 2941, 'RI'], [3030, 3898, 'NH'], [3900, 4993, 'ME'], 
        [5000, 5496, 'VT'],[5500, 5545, 'MA'], [5600, 5908, 'VT'], [6000, 6390, 'CT'], 
        [6389, 6391, 'NY'], [6400, 6929, 'CT'],[7000, 8990, 'NJ'], 
        [10000, 14976, 'NY'], [15000, 19641, 'PA'], [19700, 19981, 'DE'],
        [20000, 20040, 'DC'], [20039, 20042, 'VA'], [20039, 20168, 'VA'], [20041, 20600, 'DC'],
        [20041, 20043, 'VA'], [20330, 20332, 'MD'], [20334, 20798, 'MD'], [20798, 20800, 'DC'],
        [20811, 21931, 'MD'], [22000, 24659, 'VA'], [24700, 26887, 'WV'], [27005, 28910, 'NC'],
        [29000, 29949, 'SC'], [30000, 32000, 'GA'], [32003, 34998, 'FL'], [35003, 36926, 'AL'],
        [37009, 38590, 'TN'], [38600, 39777, 'MS'], [39900, 39902, 'GA'], [40002, 42789, 'KY'],
        [43000, 46000, 'OH'], [46000, 47998, 'IN'], [48000, 49972, 'MI'], [50000, 52810, 'IA'],
        [53000, 54991, 'WI'], [55000, 56764, 'MN'], [57000, 57800, 'SD'], [58000, 58857, 'ND'],
        [59000, 59938, 'MT'], [60000, 63000, 'IL'], [63000, 65900, 'MO'], [66001, 67955, 'KS'],
        [68000, 68119, 'NE'], [68118, 68121, 'IA'], [68121, 69368, 'NE'], [70000, 71233, 'LA'],
        [71232, 71234, 'MS'], [71233, 71498, 'LA'], [71600, 72960, 'AR'], [73000, 73200, 'OK'],
        [73300, 73302, 'TX'], [73400, 74967, 'OK'], [75000, 75502, 'TX'], [75501, 75503, 'AR'],
        [75502, 80000, 'TX'], [80000, 81659, 'CO'], [82000, 83129, 'WY'], [83200, 83877, 'ID'],
        [84000, 84785, 'UT'], [85000, 86557, 'AZ'], [87000, 88442, 'NM'], [88509, 88590, 'TX'],
        [88900, 89884, 'NV'], [90000, 96163, 'CA'], [96700, 96899, 'HI'], [97000, 97921, 'OR'],
        [98000, 99404, 'WA'], [99500, 99951, 'AK']
    ];
    if(/^\d{5}$/.test(zip)){
        zip= Number(zip.substring(0,5));
        while(i<72){
            next= statezips[i++];
            if(zip> next[0] && zip< next[1]) return next[2];
        }
    }
    return '';
}

zipToState('04355')

/*  returned value: (String)
ME
*/

Load an array of zipcodes you do serve in an array. If you are using jQuery :

var zip= $('#zipcode').val();

if( $.inArray( zip, zipCadeArray)===-1){
  alert("We don't service that zip")
}

Modify the alert to behavior you want

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top