Preselect phone country based on country selection in other field

Hi @vivalis

Hope you’re doing well today!

Can you please share some more information about how have you added the ISO 3166-1 alpha-2 country codes? I am trying to understand if you have customized them in the Forminator “Address” field or if you’ve added them in the “Select” field.

Alternatively, you can also share the form export via pastebin.com or upload it on Google Drive and share the URL here so that I can take a closer look.

Kind Regards,
Saurabh

Dear Saurabh,

Sorry if I wasn’t clear with my question. The situation is actually quite simple: There’s a select field A with alpha-2 country codes (e.g. AT, CH, DE, ES, FR, IT). Then, there’s an international phone field B.

What I’d like to achieve: When the user selects a country in A, I’d like to programmatically select the same country in the phone field B.

Kind regards, Roger

Hi @vivalis

Please try this code:

add_action( 'wp_footer', 'wpmudev_country_code_selection', 9999 );
function wpmudev_country_code_selection() {
	global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($) {
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		}, 100);
		
		$(document).on('after.load.forminator', function(event, form_id) {
			if ( event.target.id == 'forminator-module-6' ) { //Please change 2910 to your form's ID
				$('#select-1 select').on('select2:select', function(e) {  //Please use first select field ID
					var select_val = $(e.currentTarget).val();
					if ( select_val == 'CH' ) {
                        $('#select-2 select').val('+91').trigger('change'); //Please use second select field ID
                    }

                    if ( select_val == 'AT' ) {
                        $('#select-2 select').val('+11').trigger('change'); //Please use second select field ID
                    }
				});
			}
		});
	});
	</script>
	<?php
}

Our SLS team have added condition for two codes?CH?&?AT?. You can add more. Country codes are used for example so you need to change that.

Please let us know if that helps.

Kind Regards,
Kris

Dear Kris, thanks for your solution. I changed the target.id to 938, the 1st field (country field) to select-5 and the 2nd field (phone field) to phone-1. It doesn’t work because the 2nd field is a phone field, not a select field, and has not select element. I tried to target the .iti__flag-container and the .iti__selected-flag class with the jQuery selector, with no success.

I think I don’t need the add_action. If I know how to programmatically change the country/flag of the phone field, I can trigger the change in the JS event of the country field. So, the big question is: Which element is to target in a phone field in order to change the country/flag?

Hello @vivalis ,

Can you share your form with us? This would allow us to help you better.
Check how to export form https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export
Share it with us using gdrive or using a code tag.

kind regards,
Kasia

Dear Kasia,

The website is not online yet. But my question is really simple: How can I change the country of a Forminator phone field by Javascript/jQuery?

Hello @vivalis,

Please try the modified snippet (in this example I’m using UK and DE options):

<?php

add_action( 'wp_footer', 'wpmudev_country_code_selection', 9999 );
function wpmudev_country_code_selection() {
	global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($) {
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		}, 100);
		
		$(document).on('after.load.forminator', function(event, form_id) {
			if ( event.target.id == 'forminator-module-6' ) { //Please change 6 to your form's ID
				$('#select-1 select').on('select2:select', function(e) {  //Please use first select field ID
					var select_val = $(e.currentTarget).val();
					if ( select_val == 'UK' ) {
                        $('#phone-1 input').val('+44').trigger('change'); //Please use second select field ID
                        $('.iti__selected-flag .iti__flag')[0].className = 'iti__flag iti__gb'
                    }

					if ( select_val == 'DE' ) {
                        $('#phone-1 input').val('+49').trigger('change'); //Please use second select field ID
                        $('.iti__selected-flag .iti__flag')[0].className = 'iti__flag iti__de'
                    }
				});
			}
		});
	});
	</script>
	<?php
}

– you can check the classes for the flags in this DIV element:
https://prnt.sc/L4VWUNfUeCtz

and use the country code in this part for the flag image to be switched:

$(‘.iti__selected-flag .iti__flag’)[0].className = ‘iti__flag iti__de‘

For example, in case of FR it will become:

$(‘.iti__selected-flag .iti__flag’)[0].className = ‘iti__flag iti__fr‘

Also please make sure to change 6 to your form ID on this line:

if ( event.target.id == 'forminator-module-6' ) { //Please change 6 to your form's ID

Let us know if you need any further help with that!

Best Regards,
Dmytro

Thank you, Dmytro. I’ve implemented it with JS only and a hidden dropdown with the country phone codes ($country_phone_code). If the user changes the country (in $countries_dd), that change triggers the following updates:
– Hidden field with country phone codes is changed to the same as the user selected country (the option label is the phone code).
– Flag and phone code of phone field ($customer_phone) are changed.

//change event of user country field ($countries_dd)
$($country_phone_code).val($(this).val()).change();
        $($customer_phone + ' input').val($($country_phone_code + ' option:selected').text()).change();
        $('.iti__selected-flag .iti__flag')[0].className = 'iti__flag iti__' + $($countries_dd).val().toLowerCase();

Thanks for your help!

Kind regards, Roger