I've created Simple Form where I've set default country Name n Region like



                        <div class="field country required">

                            <div class="control" name="country">

                                <?php echo $block->getCountryHtmlSelect() ?>





                        <div class="field region required">

                            <div class="control">

                                <select id="region_id" name="region_id" title="<?php echo __('State/Province') ?>" class="validate-select" style="display:none;">

                                    <option value=""><?php echo __('Select Your State') ?></option>


                                <input type="text" id="region" name="region" value="<?php echo $block->getRegion() ?>" class="input-text <?php echo $block->escapeHtmlAttr($this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('region')) ?>" style="display:none;">



<script type="text/x-magento-init">
        "#country": {

            "regionUpdater": {

                "optionalRegionAllowed": <?= /* @noEscape */ $block->getConfig('general/region/display_all') ? 'true' : 'false' ?>,

                "regionListId": "#region_id",

                "regionInputId": "#region",

                "postcodeId": "#zip",

                "form": "#form-validate",

                "regionJson": <?= /* @noEscape */ $this->helper(\Magento\Directory\Helper\Data::class)->getRegionJson() ?>,

                "defaultRegion": "<?= (int) $block->getRegionId() ?>",

                "countriesWithOptionalZip": <?= /* @noEscape */ $this->helper(\Magento\Directory\Helper\Data::class)->getCountriesWithOptionalZip(true) ?>





ignore the table tag I've just copied specific part of the code. it works fine but in my form I'm setting GeoLocation n in that I'm also setting the country name as well but when I set the country name from API then the Region Dropdown do not change like if I've select India then it will not show the regions of India it will show the US regions (default one). How can I change the Region name as well when the country name is been changed programmatically.

Updated: in my Autofill.js file I'm setting my Country name like

if (componentForm[addressType] == 'country') {
                      var val = place.address_components[i];
                      // alert(val.long_name);
                      document.getElementById('country').value = val.short_name;
  • how are you setting the country? – Marius Oct 7 '20 at 11:50
  • @Marius Sir Updated the Question – Asad Khan Oct 7 '20 at 12:08
  • @Marius Sir I've setted val.short_name it returns like IND for india PK for Pakistan it works fine but states are not changing. Like for India it need to show the states for India but it is stuck in default US states while when I'm doing this menually it works fine – Asad Khan Oct 7 '20 at 12:12
  • try adding Event.fire(document.getElementById('country'), 'change'); after hanging the country. – Marius Oct 7 '20 at 12:31
  • Sir it gives me an error Event.fire is not a fucntion – Asad Khan Oct 7 '20 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.