jQuery form zip code to state function

Question

I'm trying to convert a preexisting javascript function into a jQuery function. The function comes from http://javascript.internet.com/forms/zip-to-state.html and aims to convert a user-entered zip code into a state. I'm using jQuery 1.3.2, with all the necessary plugins, but I'm not very familiar with jQuery syntax and how to convert this from plain ol' Javascript syntax.

The setState function takes two parameters, the zip code element and the state element, so I'm trying to do something like this:

$('$zip_code').change( function () { setState($(this), $('#state')); });

Any thoughts on this syntax? Thanks, Dakota

function getState(zip) {
    if ((parseInt(zipString.substr(zip / 4, 1), 16) & Math.pow(2, zip % 4)) && (zip.length == 5))
     for (var i = 0; i < stateRange.length; i += 7)
      if (zip <= 1 * stateRange.substr(i, 5))
       return stateRange.substr(i + 5, 2);
    return null;
}

function setState(txtZip, optionBox) {
    if (txtZip.value.length != 5 || isNaN(txtZip.value / 4)) {
     optionBox.options[0].selected = true;
     alert("Please enter a 5 digit, numeric zip code.");
     return;
    }

    var state = getState(txtZip.value);

    for (var i = 0; i < optionBox.options.length; i++)
     if (optionBox.options[i].value == state)
      return optionBox.options[i].selected = true;
    for (var i = 0; i < optionBox.options.length; i++)
     if (optionBox.options[i].value == "XX")
      return optionBox.options[i].selected = true;
}

Answer 1

Unless your zip field is a drop down you would probably be better off using either blur or keyup in your function.

$('#zip_code').blur( function () { setState($(this), $('#state')); });

I also changed $zip_code to #zip_code.

Answer 2

You can leave the getState and setState functions just as they are, but you should really read up on jQuery before you go asking questions on how to use it. If you don't even know the syntax, you might want to read up on how to use it.

Like Aberon said, use blur in this situation and change '$zip_code' to '#zip_code', where 'zip_code' corresponds to:

<input type="text" id="zip_code" name="whatever_you_want" />

You also want a select box with an id of 'state':

<select id="state">
   ... options ...
</select>

Aberon's solution still wont work, however, because it is incomplete...

$('#zip_code').blur( function () { setState($(this)[0], $('#state')[0]); });

You want to get the value from the zip_code input element, thus the val() call. You also want the DOM element for the select box with id == 'state', so instead of using the array returned by $('#state'), you want the first element.

Try it out, I hope this helped.

-Stephen

Answer 3

The data tables embedded in that script are obsolete and full of errors. Compare them to the start of the current (May 2010) ZIP-state breaks shown here:

00501 NY 00601 PR 00801 VI 00901 PR 01001 MA 02801 RI 03031 NH 03901 ME 05001 VT 06001 CT 07001 NJ 09002 AE 10001 NY 15001 PA 19701 DE 20001 DC 20101 VA 20201 DC 20588 MD 20590 DC 20598 VA 20599 DC 20601 MD 22003 VA 24701 WV...

The USPS updates their postal databases monthly. Beware of frozen datasources, they're only accurate at the moment of creation. http://semaphorecorp.com is a cheap source of current USPS data.