Magento – How to use region updater in custom module

javascriptmagento-2.1

I want to use the country and region/state fields in the custom form of my custom module.

I am able to get countries list & states list of US now i want to update regions on the basis of country selected but i am not able how i can use /app/code/core/Mage/Checkout/view/frontend/js/region-updater.js here.

Thanks,

Best Answer

Looking at Magento_Customer/view/frontend/templates/form/register.phtml, the update-region.js is being including like this:

<script type="text/x-magento-init">
    {
        "#country": {
            "regionUpdater": {
                "optionalRegionAllowed": <?php /* @escapeNotVerified */ echo($block->getConfig('general/region/display_all') ? 'true' : 'false'); ?>,
                "regionListId": "#region_id",
                "regionInputId": "#region",
                "postcodeId": "#zip",
                "form": "#form-validate",
                "regionJson": <?php /* @escapeNotVerified */ echo $this->helper('Magento\Directory\Helper\Data')->getRegionJson() ?>,
                "defaultRegion": "<?php /* @escapeNotVerified */ echo $block->getFormData()->getRegionId() ?>",
                "countriesWithOptionalZip": <?php /* @escapeNotVerified */ echo $this->helper('Magento\Directory\Helper\Data')->getCountriesWithOptionalZip(true) ?>
            }
        }
    }
</script>

You can place this code in your template and have your block class extend from Magento\Customer\Block\Form\Register.

This requires that you have the elements #region_id, #region, #zip, #country and that your form is #form-validate.

Fields should be as follows:

           <div class="field region required">
                <label for="region_id" class="label"><span><?php /* @escapeNotVerified */ echo __('State/Province') ?></span></label>
                <div class="control">
                    <select id="region_id" name="region_id" title="<?php /* @escapeNotVerified */ echo __('State/Province') ?>" class="validate-select" style="display:none;">
                        <option value=""><?php /* @escapeNotVerified */ echo __('Please select a region, state or province.') ?></option>
                    </select>
                    <input type="text" id="region" name="region" value="<?php echo $block->escapeHtml($block->getRegion()) ?>" title="<?php /* @escapeNotVerified */ echo __('State/Province') ?>" class="input-text <?php /* @escapeNotVerified */ echo $this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('region') ?>" style="display:none;">
                </div>
            </div>

            <div class="field zip required">
                <label for="zip" class="label"><span><?php /* @escapeNotVerified */ echo __('Zip/Postal Code') ?></span></label>
                <div class="control">
                    <input type="text" name="postcode" value="<?php echo $block->escapeHtml($block->getFormData()->getPostcode()) ?>" title="<?php /* @escapeNotVerified */ echo __('Zip/Postal Code') ?>" id="zip" class="input-text validate-zip-international <?php /* @escapeNotVerified */ echo $this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('postcode') ?>">
                </div>
            </div>

            <div class="field country required">
                <label for="country" class="label"><span><?php /* @escapeNotVerified */ echo __('Country') ?></span></label>
                <div class="control">
                    <?php echo $block->getCountryHtmlSelect() ?>
                </div>
            </div>
Related Topic