Overriding woocommerce shipping calculator in child theme - php

Question

I have overridden the woocommerce shipping calculator and it works. However, when I change countries, the 'State' input field appears when I have set that as a hidden field. If I then change back to my home country, Australia, the State field remains, but becomes a dropdown and is populated with the States of Australia. This field is part of the original theme's shipping-calculator.php, not my child theme one.
I'm not sure how this is happening since my child theme works fine until I change countries. I am trying to include the use of the AddressFinder widget into my cart shipping calculator when the customer is from Australia, and not use it when the customer is from another country.
defined( 'ABSPATH' ) || exit;
do_action( 'woocommerce_before_shipping_calculator' ); ?>
<script>
(function(){
var cartwidget, initAF = function(){
cartwidget = new AddressFinder.Widget(
document.getElementById('address_field'),
'<AddressFinder Key Here>',
'AU',
{
"address_params": {}
}
);
cartwidget.on("result:select", function(fullAddress, metaData) {
var combinedAddressLine1And2;
if ( metaData.address_line_2 ) {
combinedAddressLine1And2 = metaData.address_line_1 + ', ' + metaData.address_line_2
} else {
combinedAddressLine1And2 = metaData.address_line_1
}
if ( document.getElementById("calc_shipping_country").value == "Australia" ) {
document.getElementById('calc_shipping_address_1').value = combinedAddressLine1And2;
document.getElementById('calc_shipping_state').value = metaData.state_territory;
document.getElementById('calc_shipping_postcode').value = metaData.postcode;
} else {
document.getElementById('calc_shipping_address_1').value = '';
document.getElementById('calc_shipping_state').value = '';
document.getElementById('calc_shipping_postcode').value = '';
}
//window.alert(document.getElementById('calc_shipping_address_1').value);
document.getElementById('calc_shipping_city').value = metaData.locality_name;
});
};
function downloadAF(f){
var script = document.createElement('script');
script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
script.async = true;
script.onload=f;
document.body.appendChild(script);
};
document.addEventListener("DOMContentLoaded", function () {
downloadAF(initAF);
});
})();
function country_updated() {
if ( document.getElementById("calc_shipping_country").value == "Australia") {
document.getElementById("address_field").type = 'text';
document.getElementById("calc_shipping_city").type = 'hidden';
} else {
document.getElementById("calc_shipping_city").type = 'text';
document.getElementById("address_field").type = 'hidden';
}
}
</script>
<form class="woocommerce-shipping-calculator" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
<?php printf( '%s', esc_html( ! empty( $button_text ) ? $button_text : __( 'Calculate shipping', 'woocommerce' ) ) ); ?>
<section class="shipping-calculator-form" style="display:none;">
<?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_country', true ) ) : ?>
<p class="form-row form-row-wide" id="calc_shipping_country_field">
<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state country_select" onchange="country_updated()">
<option value=""><?php esc_html_e( 'Select a country…', 'woocommerce' ); ?></option>
<?php
foreach ( WC()->countries->get_shipping_countries() as $key => $value ) {
echo '<option value="' . esc_attr( $key ) . '"' . selected( WC()->customer->get_shipping_country(), esc_attr( $key ), false ) . '>' . esc_html( $value ) . '</option>';
}
?>
</select>
</p>
<?php endif; ?>
<p class="form-row form-row-wide" id="shipping_address_field">
<input type="text" placeholder="<?php esc_attr_e( 'Enter Address Here', 'woocommerce' ); ?>" id="address_field" name="address_field" placeholder="Enter address here" class="address-search">
</p>
<p class="form-row form-row-wide" id="calc_shipping_address_field_1">
<input type="hidden" name="calc_shipping_address_1" id="calc_shipping_address_1" />
</p>
<p class="form-row form-row-wide" id="calc_shipping_city_field">
<input type="hidden" name="calc_shipping_city" id="calc_shipping_city" />
</p>
<p class="form-row form-row-wide" id="calc_shipping_state_field">
<input type="hidden" name="calc_shipping_state" id="calc_shipping_state" />
</p>
<p class="form-row form-row-wide" id="calc_shipping_postcode_field">
<input type="hidden" name="calc_shipping_postcode" id="calc_shipping_postcode" />
</p>
<p><button type="submit" name="calc_shipping" value="1" class="button"><?php esc_html_e( 'Update', 'woocommerce' ); ?></button></p>
<?php wp_nonce_field( 'woocommerce-shipping-calculator', 'woocommerce-shipping-calculator-nonce' ); ?>
</section>
</form>
<?php do_action( 'woocommerce_after_shipping_calculator' ); ?>
When the customer is from Australia - it should display the country select input and an address input box - which has the AddressFinder widget on it. When the customer is from another country, it should display the country select and the city input field. Instead, when another country is selected, the state field shows as well. And when changing back to Australia, the State field remains.

Answer 1

I figured out the issue. In the 'Country' select, I had left it's class as: class="country_to_state country_select" - so this was obviously populating and calling the State input field. I also realised my javascript should have been checking the country select value for "AU" not "Australia".