CODEWITHSUNDEEP
c#javascriptasp.net
techora
techora

Reputation: 619

Autofill City and State with Zip Code entry

Trying to get a form to autofill the City and State textboxes when I enter in the Zip Code.

The code below is what I'm trying to use. If I replace the <asp:TextBox> with a <input type..> it work's but I specifically need to use <asp:TextBox> for my fields. Does anyone have a tips on how I can get this to work?

Here is a jsfiddle of it working with input's: http://jsfiddle.net/7VtHc/5/

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">   </script>
<script type='text/javascript'>
$(window).load(function () {
    $(document).ready(function () {
        $("#zipTxtBox").keyup(function () {
            var el = $(this);
            if (el.val().length === 5) {
                $.ajax({
                    url: "http://zip.elevenbasetwo.com",
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    data: "zip=" + el.val(),
                    success: function (result, success) {
                        $("#cityTxtBox").val(result.city);
                        $("#stateTxtBox").val(result.state);
                    }
                });
            }
        });
    });
});
</script>

<div class="row">
      <div class="col-xs-6">
          <asp:Label ID="Label13" runat="server" Text="Zip Code" />
          <asp:TextBox ID="zipTxtBox" runat="server" />
      </div>
      <div class="col-xs-3">
          <asp:Label ID="Label15" runat="server" Text="City" />
          <asp:TextBox ID="cityTxtBox" runat="server" />
      </div>
      <div class="col-xs-2">
          <asp:Label ID="Label16" runat="server" Text="State" />
          <asp:TextBox ID="stateTxtBox" runat="server" />
      </div>
</div>

Upvotes: 0

Views: 4194

Answers (1)

balexandre
balexandre

Reputation: 75103

in order to use ASP.NET Server Controls you need to use their ID's (if you see the source code, your textbox have a weird id, and not the one you specified in the ID attribute of the control.

If you're using an old version of WebForms (below .NET 3.5 - inclusive) you need to use:

$("#<%= cityTxtBox.ClientID %>").val(result.city);
$("#<%= stateTxtBox.ClientID %>").val(result.state);

the same when you pull the zip code:

$("#<%= zipTxtBox.ClientID %>").keyup( ...

if you have a recent WebForms version (.NET 4+) all you need to set is set ClientIDMode to static and then you can use the normal code as you had, like:

<asp:TextBox ID="cityTxtBox" ClientIDMode="static" runat="server" />

more on static controls in Scott's Guthrie blog entry

Upvotes: 4

Related Questions