JQuery help after country selection

  • Resolved AndrwCris

    (@andrwcris)


    7 years, 4 months ago

    I need to phone number field to be required only if a customer is outside of the UK and I’ve got that working using

    add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );
 
function wc_npr_filter_phone( $address_fields ) {
$wc = WC();
$country = $wc->customer->get_country();
  if($country !== 'GB'){
$address_fields['billing_phone']['required'] = true;
}
return $address_fields;
}

    So now ‘all’ I need to do now is get the CSS updated via javascript I presume…

    I’ve got a child theme with an enqueued js file and to start with all I want it to do is when I click the country dropdown box (or even better when it changes) I want an alert to popup but struggling to get this to work.

    I had thought something like the code below would work but not getting anything…

    jquery( "#select2-billing_country-container" ).change(function() {
  alert( "Test" );
});

    After I’ve got that bit working then I want to get the country selected from the dropdown box so that it will be something along the lines of

    if (#select2-billing_country-container".text()==="United Kingdom (UK)" ) 
{
  jQuery("#billing_phone_field > label > abbr").hide();
} 
else
{
  jQuery("#billing_phone_field > label > abbr").show();
}

    Many thanks,

    Andrew

    • This topic was modified 7 years, 4 months ago by AndrwCris.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter AndrwCris

    (@andrwcris)

    I’ve done some more work on this and getting a bit closer

    jQuery( document ).ajaxComplete(function() {
	jQuery( ":input.country_to_state" ).change(function() {
		if (jQuery("#select2-billing_country-container").text()==="United Kingdom (UK)") {
			alert("UK selected")
			//jQuery("#billing_phone_field > label > abbr").hide();
		} 
		else 
		{
			alert("Non UK Country Selected")
			//jQuery("#billing_phone_field > label > abbr").show();			
		}
	})
  });
  
  //almost there but not 'clearing' if selecting one after another

    But as noted in the comment if I select say 3 countires one after another I have to click OK 3 times so not quite right. Also if I comment out the alerts and uncomment the jQuery lines that doesn’t seem to work although I’m hoping thats linked the the above as they do work as single commands in the console…

    You are doing something totally weird…
    try this:

    function hide_phone_uk_script() {
if(is_checkout()) {
?>
<script>
jQuery( '#billing_country' ).change( function () {
var customercountry = jQuery('#billing_country').val();
if (customercountry == "GB") {
jQuery("#billing_phone_field label abbr").hide();
}
else {
jQuery("#billing_phone_field label abbr").show();
}
});
</script>
<?php
}	
}
add_action( 'wp_footer', 'hide_phone_uk_script' );
    Thread Starter AndrwCris

    (@andrwcris)

    Hi Superkot,

    Lol OK I’d gone with that approach based on what I read here – https://github.com/woocommerce/woocommerce/issues/12409 and presumed I need to run something similar in an attached js file…

    However, your solution worked totally and is just what I need thankyou (with very slight tweak to jQuery selector).

    The full code included in my functions.php file of the child theme is shown below in case it’s of use to anyone else and many thanks for the jQuery solution ??

    add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );

function wc_npr_filter_phone( $address_fields ) {
$wc = WC();
$country = $wc->customer->get_country();
  if($country !== 'GB'){
$address_fields['billing_phone']['required'] = true;
} 
return $address_fields;
} 

function hide_phone_uk_script() {
if(is_checkout()) {
?>
<script>
jQuery( '#billing_country' ).change( function () {
var customercountry = jQuery('#billing_country').val();
if (customercountry == "GB") {
jQuery("#billing_phone_field > label > abbr").hide();
}
else {
jQuery("#billing_phone_field > label > abbr").show();
}
});
</script>
<?php
}	
}
add_action( 'wp_footer', 'hide_phone_uk_script' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘JQuery help after country selection’ is closed to new replies.