Announcement

Collapse
No announcement yet.

Enter Zipcode and auto fill city / auto select State

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Enter Zipcode and auto fill city / auto select State

    I'm using this method for auto detecting city and state based on zipcode
    https://css-tricks.com/using-ziptastic/

    It pulls from a free api that allows for 100 requests per day.

    I have it working with the city field, but since the state field is a select box, it is not working for it.

    How do I get the state to be selected?

    If I change #ShipStateSelect to #ShipState then it does fill in the state in the Other State/Province field.

    Code:
    <script>
    function is_int(value) {
      if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
        return true;
      } else {
        return false;
      }
    }
    
    
    $("#ShipZip").keyup(function() {
    
      // Cache
      var el = $(this);
    
      // Did they type five integers?
      if ((el.val().length == 5) && (is_int(el.val()))) {
    
        // Call Ziptastic for information
        $.ajax({
          url: "https://zip.getziptastic.com/v2/US/" + el.val(),
          cache: false,
          dataType: "json",
          type: "GET",
          success: function(result, success) {
    
            $(".zip-error, .instructions").slideUp(200);
    
            $("#ShipCity").val(result.city);
         $("#ShipStateSelect").val(result.state);
    
          },
    
        });
    
      } 
    
    });
    
    </script>

    #2
    The VALUE of the OPTION to be selected has to match the value being passed in via jQuery. So, if my zip produced the value of 'WA' and my select dropdown option value was 'washington' it wont select. If the values don't match, you'd have to create a lookup table to convert them.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      Thanks for the help! I actually managed to find a quicker solution!
      I went to the Ziptastic website and looked at their documentation
      https://www.getziptastic.com./documentation

      And I replaced
      $("#ShipStateSelect").val(result.state); in my code to
      $("#ShipStateSelect").val(result.state_short); This now works with my option values, without needing to do additional coding.

      Comment


        #4
        Yup, basically getting the Option VALUE and the value you are asking to select to be the same.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment

        Working...
        X