How to Create Country & State Dropdown in Magento2 Frontend Custom Form?

Add an image programmatically from any url in Magento 2

[crayon-63308bdfa119e502143365/] Using above fucntion Images can be imported directly from...

Magento 2 : Override the Category view block file

Override view block using di.xml and add the below code...

How to check list of Layout XML called for a specific page in Magento 2?

You can check a list of called layout XML for...

Magento 2 : Setup PWA from Scratch

Follow the below steps to install and set up PWA...

First create a file “index.php” at app\code\local\Magemonkeys\Form\Block with below code.

<?php
namespace Magemonkeys\Form\Block;
 
class Index extends \Magento\Framework\View\Element\Template
{
    protected $directoryBlock;
    protected $_isScopePrivate;
    
    public function __construct(
         \Magento\Framework\View\Element\Template\Context $context,
         \Magento\Directory\Block\Data $directoryBlock,
         array $data = []
         )
         {
         parent::__construct($context, $data);
         $this->_isScopePrivate = true;
         $this->directoryBlock = $directoryBlock;
         }
 
         public function getCountries()
         {
         $country = $this->directoryBlock->getCountryHtmlSelect();
         return $country;
         }
         public function getRegion()
         {
         $region = $this->directoryBlock->getRegionHtmlSelect();
         return $region;
         }
         public function getCountryAction()
         {
         return $this->getUrl('magemonkeys/form/country', ['_secure' => true]);
         }
    
    
}

<?php

namespace Magemonkeys\Form\Block;

class Index extends \Magento\Framework\View\Element\Template

{

protected $directoryBlock;

protected $_isScopePrivate;

public function __construct(

\Magento\Framework\View\Element\Template\Context $context,

\Magento\Directory\Block\Data $directoryBlock,

array $data = []

)

{

parent::__construct($context, $data);

$this->_isScopePrivate = true;

$this->directoryBlock = $directoryBlock;

}

public function getCountries()

{

$country = $this->directoryBlock->getCountryHtmlSelect();

return $country;

}

public function getRegion()

{

$region = $this->directoryBlock->getRegionHtmlSelect();

return $region;

}

public function getCountryAction()

{

return $this->getUrl('magemonkeys/form/country', ['_secure' => true]);

}

Now, you need to create another file at app\code\local\Magemonkeys\Form\view\frontend\layout\ with following code and name it as “form_form_index.xml”

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
         <head>
         <title>form</title>
         </head>
     <body>     
         <referenceContainer name="content">                 
                     <block class="Magemonkeys\Form\Block\Index" name="form" template="form/index.phtml">
                     </block>
         </referenceContainer>       
         </body>
</page>

<?xml version="1.0"?>

<head>

</head>

<body>

</block>

</referenceContainer>

</body>

</page>

Now create “index.phtml” with following code at app\code\local\Magemonkeys\Form\view\frontend\templates\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>

<?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":{}}'>

<?php echo $countryList?>

</div>

<?php echo $regionList?>

</div>

<input name="state" id="states" title="<?php /* @escapeNotVerified */ echo __('State') ?>" class="input-text" type="text" />

</div>

</form>

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>

Lastly, you need to create “Country.php” in your form folder at app\code\local\Magemonkeys\Form\Controller\Form\ with following code.

<?php
namespace Magemonkeys\Form\Controller\Form;
 
class Country extends \Magento\Framework\App\Action\Action
{
         protected $resultJsonFactory;
    
    protected $regionColFactory;
 
         public function __construct(
         \Magento\Framework\App\Action\Context $context,
         \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
         \Magento\Directory\Model\RegionFactory $regionColFactory)
    {     
         $this->regionColFactory     = $regionColFactory;
         $this->resultJsonFactory     = $resultJsonFactory;
         parent::__construct($context);
         }
 
         public function execute()
         {
         $this->_view->loadLayout();
         $this->_view->getLayout()->initMessages();
         $this->_view->renderLayout();
 
         $result           = $this->resultJsonFactory->create();
         $regions=$this->regionColFactory->create()->getCollection()->addFieldToFilter('country_id',$this->getRequest()->getParam('country'));
         
         $html = '';
         
         if(count($regions) > 0)
         {
                     $html.='<option selected="selected" value="">Please select a region, state or province.</option>';
                     foreach($regions as $state)
                     {
                                 $html.=    '<option  value="'.$state->getName().'">'.$state->getName().'.</option>';
                     }
         }
         return $result->setData(['success' => true,'value'=>$html]);
   }
}

<?php

namespace Magemonkeys\Form\Controller\Form;

class Country extends \Magento\Framework\App\Action\Action

{

protected $resultJsonFactory;

protected $regionColFactory;

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,

\Magento\Directory\Model\RegionFactory $regionColFactory)

{

$this->regionColFactory = $regionColFactory;

$this->resultJsonFactory = $resultJsonFactory;

parent::__construct($context);

}

public function execute()

{

$this->_view->loadLayout();

$this->_view->getLayout()->initMessages();

$this->_view->renderLayout();

$result = $this->resultJsonFactory->create();

$regions=$this->regionColFactory->create()->getCollection()->addFieldToFilter('country_id',$this->getRequest()->getParam('country'));

$html = '';

if(count($regions) > 0)

{

$html.='<option selected="selected" value="">Please select a region, state or province.</option>';

foreach($regions as $state)

{

$html.= '<option value="'.$state->getName().'">'.$state->getName().'.</option>';

}

return $result->setData(['success' => true,'value'=>$html]);

}

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?
Let's discuss

How to Create Country & State Dropdown in Magento2 Frontend Custom Form?

Related articles

Contact us for scientific strategies to increase your site conversions

Connect With Us

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?Let's discuss

How to Create Country & State Dropdown in Magento2 Frontend Custom Form?

Related articles

Contact us for scientific strategies to increase your site conversions

Connect With Us

Any Question or Concerns?
Let's discuss