---
title: Auto-filling addresses of existing customers
related:
  - https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/gathering-customer-details-during-checkout.md
  - https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/integrating-the-shopping-cart.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

> **Note:** The approach described on this page extends the [customer details](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/gathering-customer-details-during-checkout.md) step from the second part of the [Implementing a checkout process](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process.md) series, and therefore assumes your checkout process is implemented in a similar fashion.
>
> Also note that to implement this feature, you need to have user registration enabled on your site. Learn more in [Enabling user registration](https://docs.kentico.com/13/managing-users/user-registration-and-authentication/enabling-user-registration.md).

Auto-fill is an option found in web browsers and online applications that allows users to easily input commonly-entered information into a web form.

You might wish to provide a similar functionality on your site to simplify the [checkout process](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process.md) for your repeat [customers](https://docs.kentico.com/13/e-commerce-features/managing-on-line-stores/customers.md). With some modifications, the method described on this page can be used to auto-fill any form in your live site application.

## Implementing auto-fill functionality for existing addresses

To implement auto-filling of existing addresses for registered customers:

1. Open the controller class facilitating your checkout process in Visual Studio.

   > **Info:** This example uses the **ShoppingService** class initialized in the controller's constructor. Learn more about _IShoppingService_ and its default implementation, the _ShoppingService,_ in [Integrating the shopping cart](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/integrating-the-shopping-cart.md).
2. To the **DeliveryDetails** action, add logic that loads addresses for existing customers.

   ```csharp

           /// <summary>
           /// Displays the customer details checkout process step with an address selector for known customers.
           /// </summary>
           public ActionResult DeliveryDetailsAddressSelector()
           {
               // Gets the current user's shopping cart
               ShoppingCartInfo cart = shoppingService.GetCurrentShoppingCart();

               // If the shopping cart is empty, redirects to the shopping cart view
               if (cart.IsEmpty)
               {
                   return RedirectToAction("ShoppingCart");
               }

               // Gets all countries for the country selector
               SelectList countries = new SelectList(countryInfo.Get(), "CountryID", "CountryDisplayName");

               // Gets the current customer
               CustomerInfo customer = shoppingService.GetCurrentCustomer();

               // Gets all customer billing addresses for the address selector
               IEnumerable<AddressInfo> customerAddresses = Enumerable.Empty<AddressInfo>();
               if (customer != null)
               {
                   customerAddresses = addressInfo.GetByCustomer(customer.CustomerID).ToList();
               }

               // Prepares address selector options
               SelectList addresses = new SelectList(customerAddresses, "AddressID", "AddressName");

               // Gets all enabled shipping options for the shipping option selector
               SelectList shippingOptions = new SelectList(shippingOption.GetBySite(SiteContext.CurrentSiteID, true).ToList(), "ShippingOptionID", "ShippingOptionDisplayName");

               // Loads the customer details
               DeliveryDetailsViewModel model = new DeliveryDetailsViewModel
               {
                   Customer = new CustomerViewModel(shoppingService.GetCurrentCustomer()),
                   BillingAddress = new BillingAddressViewModel(shoppingService.GetBillingAddress(), countries, addresses),
                   ShippingOption = new ShippingOptionViewModel(shippingOption.Get(shoppingService.GetShippingOption()), shippingOptions)
               };

               // Displays the customer details step
               return View(model);
           }


   ```
3. Add a new POST method to the controller. This method is called from the JavaScript file added in the next step. It retrieves an AddressInfo object based on the provided AddressID and serializes its select properties, allowing the JavaScript fuction to auto-fill the address form fields.

   ```csharp

           /// <summary>
           /// Loads information of an address specified by its ID.
           /// </summary>
           /// <param name="addressID">ID of the address.</param>
           /// <returns>Serialized information of the loaded address.</returns>
           [HttpPost]
           public JsonResult CustomerAddress(int addressID)
           {
               // Gets the address with its ID
               AddressInfo address = addressInfo.Get(addressID);

               // Checks whether the address was retrieved
               if (address == null)
               {
                   return null;
               }

               // Creates a response with all address information
               var responseModel = new
               {
                   Line1 = address.AddressLine1,
                   Line2 = address.AddressLine2,
                   City = address.AddressCity,
                   PostalCode = address.AddressZip,
                   CountryID = address.AddressCountryID,
                   StateID = address.AddressStateID,
                   PersonalName = address.AddressPersonalName
               };

               // Returns serialized information of the address
               return Json(responseModel);
           }


   ```
4. Add a JavaScript file that loads the selected AddressInfo object based on the AddressID provided from the address selector, and auto-fills the address form fields.

   ```js

   (function () {
       'use strict';

       // Fills address form fields with the selected address whenever 
       // an address is selected from the address selector drop-down element
       $('.js-address-selector-div').change(function () {
           var $selectorDiv = $(this),
               $addressDiv = $selectorDiv.parent(),
               $selector = $selectorDiv.find('.js-address-selector'),
               url = $selectorDiv.data('statelistaction'),
               postData = {
                   addressId: $selector.val()
               };

           // If the new address option is selected, clears all address form fields
           if (!postData.addressId) {
               eraseFields($addressDiv);
               return;
           }

           // Sends a POST request to the 'CustomerAddress' endpoint of the 'CheckoutController' 
           $.post(url, postData, function (data) {
               fillFields($addressDiv, data);
           });
       });

       function fillFields($addressDiv, data) {
           fillBasicFields($addressDiv, data);
           fillCountryStateFields($addressDiv, data);
       }

       // Fills the 'Address line 1' and '2', 'City', and 'Postal code'
       // address form fields from the selected address
       function fillBasicFields($addressDiv, data) {
           var basicFields = $addressDiv.data('fields'),
               addressType = $addressDiv.data('addresstype');

           $.each(basicFields, function (i, val) {
               var fieldId = '#' + addressType + '_' + val,
                   fieldVal = data[val];

               $(fieldId).val(fieldVal);
           });
       }

       // Fills the Country and State drop-down selectors from selected address data
       function fillCountryStateFields($addressDiv, data) {
           var $countryStateSelector = $addressDiv.find('.js-country-state-selector'),
               countryField = $countryStateSelector.data('countryfield'),
               stateField = $countryStateSelector.data('statefield'),
               $countrySelector = $countryStateSelector.find('.js-country-selector');

           // Sets id of the country's state for the 'countryStateSelector' script
           $countryStateSelector.data('stateselectedid', data[stateField]);

           // Raises the change event on the country selector drop-down element, 
           // This invokes the 'coutryStateSelector' script that shows the
           // states drop-down selector with the selected state
           $countrySelector.val(data[countryField]).change();
       }

       // Clears all address form fields
       function eraseFields($addressDiv) {
           var data = {};
           fillFields($addressDiv, data);
       }
   }());

   ```

   Add the JavaScript file to the view rendering the [customer details](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/gathering-customer-details-during-checkout.md) form.

   ```csharp title="Adding the JavaScript file"

   @Scripts.Render("~/Scripts/addressSelector.js")


   ```
5. Modify the customer details view to display the loaded addresses in a selector. For example:

   ```csharp title="Adding the address selector"

           <div class="js-address-selector-div" data-statelistaction='@Url.Action("CustomerAddress", "Checkout")'>

               @Html.LabelFor(m => m.BillingAddress.AddressID)
               @Html.DropDownListFor(m => m.BillingAddress.AddressID, Model.BillingAddress.Addresses, "(new)", new { @class = "js-address-selector" })

               <div class="message message-error">
                   @Html.ValidationMessageFor(m => m.BillingAddress.AddressID)
               </div>
           </div>


   ```

Customers signed in on your website are now able to select from previously used addresses when entering billing or shipping data during checkout.