Need basic example code for Edit Address form

Store Design
1

Looking for someone that can help me out with the Edit Address form in addresses.liquid. I have this code (and only this code added in the template):

{% for address in customer.addresses %}

  {{ address | format_address }}

  <div class="form--edit-address">
    {% form 'customer_address', address %}
      <input type="text" name="address[first_name]" value="{{ form.first_name }}" placeholder="First Name">
      <input type="text" name="address[last_name]" value="{{ form.last_name }}" placeholder="Last Name">
      <input type="text" name="address[company]" value="{{ form.company }}" placeholder="Company">
      <input type="text" name="address[address1]" value="{{ form.address1 }}" placeholder="Address Line 1">
      <input type="text" name="address[address2]" value="{{ form.address2 }}" placeholder="Address Line 2">
      <input type="text" name="address[city]" value="{{ form.city }}" placeholder="City">
      <select name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
      <select name="address[province]" data-default="{{ form.province }}"></select>
      <input type="text" name="address[zip]" value="{{ form.zip }}" placeholder="ZIP/Postal Code">
      <input type="text" name="address[phone]" value="{{ form.phone }}" placeholder="Phone Number">
      
      <button type="submit" class="btn btn-xs btn-primary">Update Address</button>
    {% endform %}
  </div>

{% endfor %}

It shows the addresses fine on the page, but the form does not work when hitting the Update Address button. In the console, on page load, I get this Javascript error, but I don’t know how to resolve: http://b3.ms/4pzMbVjeBM0G

If anyone has ideas, I’d most appreciate it! Thanks!

2

Hi HeartyPixel, I am not familiar with the theme you are using. The screenshot of the error seems to indicate there is something wrong with either the Country or Province selectors.

This is from your code below

      <select name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
      <select name="address[province]" data-default="{{ form.province }}"></select>

Maybe pre-population of the select tags might not be working? What happens if you change

To:

If it helps, this is the full edit address code from one of the Shopify free themes: (maybe there is another subtle difference we are missing)

          <div id="EditAddress_{{ address.id }}" class="hide form-vertical">
            {% form 'customer_address', address %}

              <h4>{{ 'customer.addresses.edit_address' | t }}</h4>

              <div class="grid">
                <div class="grid__item medium-up--one-half">
                  <label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
                  <input type="text" id="AddressFirstName_{{ form.id }}" name="address[first_name]" value="{{ form.first_name }}">
                </div>

                <div class="grid__item medium-up--one-half">
                  <label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
                  <input type="text" id="AddressLastName_{{ form.id }}" name="address[last_name]" value="{{ form.last_name }}">
                </div>
              </div>

              <label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
              <input type="text" id="AddressCompany_{{ form.id }}" name="address[company]" value="{{ form.company }}">

              <label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
              <input type="text" id="AddressAddress1_{{ form.id }}" name="address[address1]" value="{{ form.address1 }}">

              <label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
              <input type="text" id="AddressAddress2_{{ form.id }}" name="address[address2]" value="{{ form.address2 }}">

              <div class="grid">
                <div class="grid__item medium-up--one-half">
                  <label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
                  <input type="text" id="AddressCity_{{ form.id }}" name="address[city]" value="{{ form.city }}">
                </div>

                <div class="grid__item medium-up--one-half">
                  <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
                  <select id="AddressCountry_{{ form.id }}" class="address-country-option" data-form-id="{{ form.id }}" name="address[country]" data-default="{{ form.country }}">{{ all_country_option_tags }}</select>
                </div>
              </div>

              <div id="AddressProvinceContainer_{{ form.id }}" style="display:none">
                <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
                <select id="AddressProvince_{{ form.id }}" name="address[province]" data-default="{{ form.province }}"></select>
              </div>

              <div class="grid">
                <div class="grid__item medium-up--one-half">
                  <label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
                  <input type="text" id="AddressZip_{{ form.id }}" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters">
                </div>

                <div class="grid__item medium-up--one-half">
                  <label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
                  <input type="tel" id="AddressPhone_{{ form.id }}" name="address[phone]" value="{{ form.phone }}">
                </div>
              </div>

              <p>
                {{ form.set_as_default_checkbox }}
                <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
              </p>

              <p><input type="submit" class="btn" value="{{ 'customer.addresses.update' | t }}"></p>
              <p class="text-center"><button type="button" class="text-link link-accent-color address-edit-toggle" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button></p>

            {% endform %}
          </div>
3

I have been trying to include a new select option for customers to fill for their local government because of the wide area in my state.

I replace the city as select form:

{{ ‘customer.addresses.city’ | t }}

<select id=“AddressCity_{{ form.id }}” name=“address[city]” value="{{ form.city }>

Abule Egba (Agbado Ijaye Road) Abule Egba (Ajasa Command Rd) Abule Egba (Ajegunle) Abule Egba (Alagbado) Abule Egba (Alakuko) Abule Egba (Ekoro road) Abule Egba (Meiran Road) Abule Egba (New Oko Oba) Abule Egba (Old Otta Road) Agbara Agege (Ajuwon Akute Road) Agege (Dopemu) Agege (Iju Road) Agege (Old Abeokuta Road) Agege (Old Otta Road) Agege (Orile Agege) AGILITI AGUNGI (LEKKI) AJAO ESTATE ALFA BEACH AMUWO ANTHONY VILLAGE

How do I correct it to work? and if possible, can I replace the code for City. so it can store as a select option for City instead. Please I need a possible solution.

4

Anyone know how to stop redirecting after update customer’s addresses?