Error with {{ form.country }}

Highlighted
New Member
1 0 0

I edit the address form's country to "South Georgia & South Sandwich Islands", then I get this post request.

winsy_3-1597200081152.png

 

 

Then I check the form, I found out that the {{ form.country }} returned a wrong value. It should be "South Georgia And The South Sandwich Islands" but I got "South Georgia & South Sandwich Islands" and the value of country selection was wrong.

winsy_4-1597200117710.png

 

 

winsy_2-1597200057992.png

 

 Here is my code:

 

 

<!-- Edit Address-->
  {% if customer.addresses.size > 0 %}
    {% for address in customer.addresses %}
      <div class="modal fade" id="edit_address_{{address.id}}">
        <div class="modal-dialog modal-lg">
          {% form 'customer_address', address %}
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{{ 'customer.addresses.edit_address' | t }}</h5>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                {% render 'icon-x' %}
              </button>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
                    <input class="form-control" type="text" id="AddressFirstName_{{ form.id }}" value="{{form.first_name}}" name="address[first_name]" placeholder="{{ 'customer.addresses.first_name' | t }}" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
                    <input class="form-control" type="text" id="AddressLastName_{{ form.id }}"  name="address[last_name]" placeholder="{{ 'customer.addresses.last_name' | t }}" value="{{ form.last_name }}" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
                    <input class="form-control" type="text" id="AddressCompany_{{ form.id }}"  name="address[company]" value="{{ form.company }}" placeholder="{{ 'customer.addresses.company' | t }}">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
                    <input class="form-control" type="text" id="AddressAddress1_{{ form.id }}"  name="address[address1]" value="{{ form.address1 }}" placeholder="{{ 'customer.addresses.address1' | t }}" required>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
                    <input class="form-control" type="text" id="AddressAddress2_{{ form.id }}"  name="address[address2]" value="{{ form.address2 }}" placeholder="{{ 'customer.addresses.address2' | t }}" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
                    <input class="form-control" type="text" id="AddressCity_{{ form.id }}"  name="address[city]" value="{{ form.city }}" placeholder="{{ 'customer.addresses.city' | t }}" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
                    <select class="form-select" id="AddressCountry_{{ form.id }}" name="address[country]" data-form-id="{{ form.id }}" value="{{ form.country }}" required data-default="{{ form.country }}">
                      {{ all_country_option_tags }}
                    </select>
                  </div>
                </div>
                <div class="col-sm-6" id="AddressProvinceContainer_{{ form.id }}" style="display: none;">
                  <div class="form-group">
                    <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
                    <select class="form-select" id="AddressProvince_{{ form.id }}" name="address[province]" value="{{ form.province }}" data-default="{{form.province}}" >
                    </select>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
                    <input class="form-control" type="text" id="AddressZip_{{ form.id }}"  name="address[zip]" value="{{ form.zip }}" autocapitalize="characters" placeholder="{{ 'customer.addresses.zip' | t }}" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
                    <input class="form-control" type="text" id="AddressPhone_{{ form.id }}"  name="address[phone]" value="{{ form.phone }}" placeholder="{{ 'customer.addresses.phone' | t }}" required>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-check mb-0">
                    <input class="form-check-input" type="checkbox" id="AddressDefault_{{ form.id }}" name="address[default]">
                    <label class="form-check-label" for="AddressDefault_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-link text-decoration-none" type="button" data-dismiss="modal" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button>
              <button class="btn btn-primary" type="submit">{{ 'customer.addresses.update' | t }}</button>
            </div>
          </div>
          {% endform %}
        </div>
      </div>
    {% endfor %}
  {% endif %}

<script type="text/javascript" charset="utf-8">
  // Modified contents of customer_area.js (global asset)
  Shopify.CustomerAddress = {
    toggleForm: function(id) {
      var editEl = document.getElementById('edit_address_'+id);
      editEl.style.display = editEl.style.display == 'none' ? '' : 'none';
      return false;
    },

    toggleNewForm: function() {
      var el = document.getElementById('add_address');
      el.style.display = el.style.display == 'none' ? '' : 'none';
      return false;
    },

    destroy: function(url, confirm_msg) {
      if (confirm(confirm_msg || "Are you sure you wish to delete this address?")) {
        Shopify.postLink(url, {'parameters': {'_method': 'delete'}});
      }
    }
  }
  // initialize observers on address selectors
  new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {hideElement: 'AddressProvinceContainerNew'});  
  // Setup province selector on each customer address
  {% for address in customer.addresses %}
    new Shopify.CountryProvinceSelector('AddressCountry_{{address.id}}', 'AddressProvince_{{address.id}}', {hideElement: 'AddressProvinceContainer_{{address.id}}'});
  {% endfor %}
</script>

 

 

 

0 Likes