0

I need to integrate country and state fields for customers, I created them and listed successfully in frontend registration and profile.

When working with admin I can see the two fields but the functionality of listing states on country selection cant be achieved.

How can I achieve?

In frontend I referred this link https://magecomp.com/blog/create-country-state-dropdown-in-magento-2-custom-frontend-form/.

<?php
$countryList=$block->getCountries();
$regionList=$block->getRegion();  ?>
<form class="form retuns"
            action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
            id="return-form"
            method="post"
            data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
            data-mage-init='{"validation":{}}'>

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

             <div class="field region required">
                   <label class="label" for="state"><span><?php /* @escapeNotVerified */ echo __('State') ?></span></label>
                   <div class="control">
                        <?php echo $regionList?>
                   </div>
             </div>


             <div class="field states required" style="display:none">
                   <label class="label" for="states"><span><?php /* @escapeNotVerified */ echo __('State') ?></span></label>
                   <div class="control">
                   <input name="state" id="states" title="<?php /* @escapeNotVerified */ echo __('State') ?>"  class="input-text" type="text" />
              </div>
           </div>

</form>

<script>
            jQuery(document).on('change','#country',function() {
             var param = 'country='+jQuery('#country').val();
             jQuery.ajax({
                         showLoader: true,
                         url: '<?php /* @escapeNotVerified */ echo $block->getCountryAction(); ?>',
                         data: param,
                         type: "GET",
                         dataType: 'json'
             }).done(function (data) {
                         jQuery('#state').empty();
                         if(data.value=='')
                         {
                             jQuery('.field.states.required').show();
                             jQuery('.field.region.required').hide();
                         }
                         else
                         {
                             jQuery('#state').append(data.value);
                             jQuery('.field.states.required').hide();
                             jQuery('.field.region.required').show();
                         }
             });
    });
</script>

We have two fields for state one is text and one is a select box. How can I achieve the same in admin with jQuery functionality?

  • Can anyone help me wit this. – fernandus Mar 11 at 7:58

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.