Elementor pro forms: create country, community and city fields

				
					<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 <script>

document.addEventListener('DOMContentLoaded', function() {
  // Inicializar Select2
  const initSelect2 = (selector) => {
    jQuery(selector).select2({
      placeholder: "Select an option"
    });
  };
  
  initSelect2('#form-field-country');
  initSelect2('#form-field-state');
  initSelect2('#form-field-city');

  // Clave API
  const apiKey = "c3lnUnFWMEtoYm4xd05xeElGRDVVUW82NEU0bkg3UnpOeXYzVnZDTA==";

  // Cargar países
  jQuery.ajax({
    url: 'https://api.countrystatecity.in/v1/countries',
    method: 'GET',
    headers: {
      "X-CSCAPI-KEY": apiKey
    },
    success: function(data) {
      data.forEach(function(country) {
        jQuery('#form-field-country').append(jQuery('<option>', {
          value: country.name,
          text: country.name,
          'data-iso2': country.iso2
        }));
      });
    },
    error: function(xhr, status, error) {
      console.error("Error loading countries:", xhr.responseText);
    }
  });

  // Cargar estados cuando se selecciona un país
  jQuery('#form-field-country').change(function() {
    var countryCode = jQuery('#form-field-country option:selected').data('iso2');
    jQuery('#form-field-state').empty().trigger('change');
    jQuery('#form-field-city').empty().trigger('change');

    jQuery.ajax({
      url: `https://api.countrystatecity.in/v1/countries/${countryCode}/states`,
      method: 'GET',
      headers: {
        "X-CSCAPI-KEY": apiKey
      },
      success: function(data) {
        data.forEach(function(state) {
          jQuery('#form-field-state').append(jQuery('<option>', {
            value: state.name,
            text: state.name,
            'data-iso2': state.iso2
          }));
        });
      },
      error: function(xhr, status, error) {
        console.error("Error loading states:", xhr.responseText);
      }
    });
  });

  // Cargar ciudades cuando se selecciona un estado
  jQuery('#form-field-state').change(function() {
    var countryCode = jQuery('#form-field-country option:selected').data('iso2');
    var stateCode = jQuery('#form-field-state option:selected').data('iso2');
    jQuery('#form-field-city').empty().trigger('change');

    jQuery.ajax({
      url: `https://api.countrystatecity.in/v1/countries/${countryCode}/states/${stateCode}/cities`,
      method: 'GET',
      headers: {
        "X-CSCAPI-KEY": apiKey
      },
      success: function(data) {
        data.forEach(function(city) {
          jQuery('#form-field-city').append(jQuery('<option>', {
            value: city.name,
            text: city.name
          }));
        });
      },
      error: function(xhr, status, error) {
        console.error("Error loading cities:", xhr.responseText);
      }
    });
  });

  // Recuperar nombres completos al enviar el formulario
  jQuery('#elementor-form').submit(function(event) {
    // No preventDefault para que Elementor pueda enviar el formulario
    // event.preventDefault();

    // Obtener los nombres completos antes de enviar el formulario
    var countryName = jQuery('#form-field-country').val();
    var stateName = jQuery('#form-field-state').val();
    var cityName = jQuery('#form-field-city').val();

    // Reemplazar los valores de los campos del formulario con los nombres completos
    jQuery('#form-field-country').val(countryName);
    jQuery('#form-field-state').val(stateName);
    jQuery('#form-field-city').val(cityName);

    console.log({
      country: countryName,
      state: stateName,
      city: cityName
    }); // Aquí puedes revisar los datos del formulario según sea necesario
  });
});


 </script>