Hide states field in billing and shipping if non US country is selected

[tacocat33]

Hello,
Im looking to hide the states drop down if non us countries are selected, and then also to hide the state/province text field if the us is selected. Was wondering if anyone has this set up?
Thanks

[hmendenhall]

Hello

This can be done but it would require advanced custom code and implementation from a developer. You might want to consider joining our Managed Account Program, purchasing a block of hours, or reaching out to one of our developer partners http://www.miva.com/partners/developers

[PCINET - Andreas]

developer partners link > http://www.miva.com/partners/developers (the one on top has a trailing dot and doesn't work)

[RTHOMASDESIGN]

A couple of the ReadyThemes have this functionality built in (booc for example). If you're a developer it's not too difficult to emulate, otherwise you'll need to hire someone. You would have to be comfortable with editing your templates, form fields, stylesheets, scripts etc., but here is the code that booc uses.


This is for floating labels. It's not necessary to get this working (you can see what this looks like on barebonesbroth.com, christmastraditions.com & the booc readytheme).
/**
______ __ __ __ __ _
/ __/ /___ ____ _/ /_/ / ____ _/ /_ ___ / /____ (_)____
/ /_/ / __ \/ __ `/ __/ / / __ `/ __ \/ _ \/ / ___/ / / ___/
/ __/ / /_/ / /_/ / /_/ /___/ /_/ / /_/ / __/ (__ ) / (__ )
/_/ /_/\____/\__,_/\__/_____/\__,_/_.___/\___/_/____(_)_/ /____/
/___/

*
* Created by mzimmermann on 11/1/15.
*/
(function ($) {
'use strict';

$.fn.floatLabels = function () {
var $form = this;

if ($form) {
$('input:not([value]), input[value=""], textarea:not([value]), textarea[value=""]', $form).parents('div').addClass('no-data');
$('option:selected:not([value]), option:selected[value=""]', $form).parent().parent().addClass('no-data');
$('input, select, textarea', $form).on({
blur: function () {
$(this).parent().toggleClass('no-data', !Boolean($(this).val()));
},
change: function () {
$(this).parent().toggleClass('no-data', !Boolean($(this).val()));
},
focus: function () {
$(this).parent().removeClass('no-data');
},
input: function () {
$(this).parent().toggleClass('no-data', !Boolean($(this).val()));
}
});
}
};
}(jQuery));


This is to hide the states when a country other than the US is selected:
$.hook('ShipCountry').on('input', 'select', function (event) {
var state = $.hook('ShipState');

if ($(this).val() === 'US') {
state.children('input').addClass('h-visually-hidden').prop('disabled', true);
state.children('select').removeClass('h-visually-hidden').prop('disabled', false);
}
else {
state.children('input').removeClass('h-visually-hidden').prop('disabled', false);
state.children('select').addClass('h-visually-hidden').prop('disabled', true);
}
});
$.hook('BillCountry').on('input', 'select', function (event) {
var state = $.hook('BillState');

if ($(this).val() === 'US') {
state.children('input').addClass('h-visually-hidden').prop('disabled', true);
state.children('select').removeClass('h-visually-hidden').prop('disabled', false);
}
else {
state.children('input').removeClass('h-visually-hidden').prop('disabled', false);
state.children('select').addClass('h-visually-hidden').prop('disabled', true);
}
});

CSS:
.h-visually-hidden {
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}