[Resolved] How do implement Country State dropdown in Post forms

[Author]

Posts

[puneetS-3]

I am trying to add Country State dropdown in my post form. These are dependent fields as I searched hard and found there is no inbuilt feature in toolset forms to add such type of fields. so, I am trying to add this by custom js.
I have created two select fields and then adding options to these fields using javascript. I tried to replace my custom-coded select fields with generic fields of select type. But, not getting expected results with generic fields whereas, with custom-coded fields, it is working as expected.
I want to know that there is any way to save the data of custom-coded select field. Is it necessary to have generic fields? If yes, then how should I add options for the generic field of select type programmatically using js.

This what I am doing to add options with generic fields it is working fine for the country but code breaks for the state.

[cred_generic_field type='select' field='country' class='country']
{
"required":0
}
[/cred_generic_field]
[cred_generic_field type='select' field='state' class='states']
{
"required":0
}
[/cred_generic_field]

Js:

function populateStates( countryElementId, stateElementId ){
	
	var selectedCountryIndex = document.getElementsByClassName( countryElementId ).selectedIndex;

	var stateElement = document.getElementsByClassName( stateElementId );

	stateElement.length=0;	
	//stateElement.options[0] = new Option('Select State','');
	stateElement.selectedIndex = 0;
	
	var state_arr = s_a[selectedCountryIndex].split("|");
	
	for (var i=0; i<state_arr.length; i++) {
      var option1 = new Option(state_arr[i],state_arr[i]); 
      console.log(option1);
      jQuery(stateElement).prepend(jQuery(option1)).val('');
	//stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
	}
}

function populateCountries(countryElementId, stateElementId){
	// given the id of the <select> tag as function argument, it inserts <option> tags
	var countryElement = document.getElementsByClassName(countryElementId);
	countryElement.length=0;
	countryElement.selectedIndex = 0;
	for (var i=0; i<country_arr.length; i++) {
      var option = new Option(country_arr[i],country_arr[i]); 
      jQuery(countryElement).prepend(jQuery(option)).val('');
	}
	if( stateElementId ){
      console.log(stateElementId);
		countryElement.onchange = function(){
			populateStates( countryElementId, stateElementId );
		};
	}
}
populateCountries("country", "states"); 

Thanks

[puneetS-3]

After debugging the code I found the problem is here :

if( stateElementId ){
      console.log(stateElementId);
        countryElement.onchange = function(){   
            populateStates( countryElementId, stateElementId );
        };

The "onchange" event listener is not working. But, this is working fine with HTML fields.
I am not sure how to call this event listener with generic fields.

[Luo Yang]

Hello,

I have tried the codes you mentioned above in my localhost, I get below JS erros:
Uncaught ReferenceError: country_arr is not defined

It seems there should be a JS variable "country_arr", can you provide detail steps?
How do you define above JS variable "country_arr"?

[puneetS-3]

It seems there should be a JS variable "country_arr"
Yes. I have created an array of country names named as "country_arr".
Here is the complete code: https://pastebin.com/VyyDGfwP

[Luo Yang]

It is a problem of your custom JS codes, I assume we are talking about the JS codes from here:
hidden link

You don't need to hack their JS codes, I have tried it in my localhost with below steps:
1) Create a post form with the same shortcodes you mentioned above, and add a line to load their JS codes, for example:

<script src="<em><u>hidden link</u></em>"></script>
...
[cred_generic_field type='select' field='country' class='country']
{
"required":0
}
[/cred_generic_field]
[cred_generic_field type='select' field='state' class='states']
{
"required":0
}
[/cred_generic_field]

2) Add below JS codes in JS editor:

var country_id = jQuery('.country').attr('id');
var states_id = jQuery('.states').attr('id');
populateCountries(country_id, states_id);

Test above form in front-end, it works fine, see screenshot: country-states.JPG

More help:
hidden link

[puneetS-3]

Hi Luo,
Your help is really appreciated.
But after adding:

<script src="<em><u>hidden link</u></em>"></script>

The form is not submitting it redirects me to 404 error page.
But submitting the form with AJAX call solves the problem.
Why this is happening?

[Luo Yang]

I have tried it in my localhost with a fresh WP installation + the latest version of Toolset plugins, it works fine, there isn't the problem you mentioned above:

The form is not submitting it redirects me to 404 error page.

Please check these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2020, deactivate all custom PHP/JS code snippets, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

4) If the problem still persists, please provide database dump file(ZIP file) of your website, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[puneetS-3]

Okay.
Thank you so much for your assistance!