Region State/Provence not Displaying Drop Down Field

Question

I have built a magento store using a template and edited bits here and there, but on testing, the region (state/Provence box is not showing at all... on any of the forms, by the look of it...

My site is in payment sandbox mode, but the URL is http://temp-web.co.uk so feel free to test all you like. make accounts or anything for testing, I will be removing accounts at some point...

Could it be something to do with the UK as the default country?

I've tried following instructions to edit the scrip, comenting out the //if sections and stuff, but no such luck...

I dont know what the hell is causing this, so I am going to be a NOOB and dump some code in here, I know haters gonna hate, but well, its better than posting only irelevant code.

I know the issue lies somewhere here, as I managed to prove this by adding some text into this document, refreshing the page and it displayed. But that brings me little closer to the problem.

<?php
?>
<form id="co-billing-form" action="">
<fieldset>
<ul class="form-list">
<?php if ($this->customerHasAddresses()): ?>
    <li class="wide">
        <label for="billing-address-select"><?php echo $this->__('Select a billing address from your address book or enter a new address.') ?></label>
        <div class="input-box">
            <?php echo $this->getAddressesHtmlSelect('billing') ?>
        </div>
    </li>
<?php endif; ?>
<li id="billing-new-address-form"<?php if ($this->customerHasAddresses()): ?> style="display:none;"<?php endif; ?>>
    <fieldset>
        <input type="hidden" name="billing[address_id]" value="<?php echo $this-    >getAddress()->getId() ?>" id="billing:address_id" />
        <ul>
            <li class="fields"><?php echo $this->getLayout()->createBlock('customer/widget_name')->setObject($this->getAddress()->getFirstname() ? $this->getAddress() : $this->getQuote()->getCustomer())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?></li>
            <li class="fields">
                <div class="field">
                    <label for="billing:company"><?php echo $this->__('Company') ?></label>
                    <div class="input-box">
                        <input type="text" id="billing:company" name="billing[company]" value="<?php echo $this->htmlEscape($this->getAddress()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="input-text" />
                    </div>
                </div>
    <?php if(!$this->isCustomerLoggedIn()): ?>
                <div class="field-2">
                    <label for="billing:email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
                    <div class="input-box">
                        <input type="text" name="billing[email]" id="billing:email" value="<?php echo $this->htmlEscape($this->getAddress()->getEmail()) ?>" title="<?php echo $this->__('Email Address') ?>" class="input-text validate-email required-entry" />
                    </div>
                </div>
    <?php endif ?>
            </li>
            <li class="wide">
                <label for="billing:street1" class="required"><em>*</em><?php echo $this->__('Address') ?></label>
                <div class="input-box">
                    <input type="text" title="<?php echo $this->__('Street Address') ?>" name="billing[street][]" id="billing:street1" value="<?php echo $this->htmlEscape($this->getAddress()->getStreet(1)) ?>" class="input-text required-entry" />
                </div>
            </li>
    <?php for ($_i=2, $_n=$this->helper('customer/address')->getStreetLines(); $_i<=$_n; $_i++): ?>
            <li class="wide">
                <div class="input-box">
                    <input type="text" title="<?php echo $this->__('Street Address %s', $_i) ?>" name="billing[street][]" id="billing:street<?php echo $_i?>" value="<?php echo $this->htmlEscape($this->getAddress()->getStreet($_i)) ?>" class="input-text" />
                </div>
            </li>
    <?php endfor ?>
            <li class="fields">
                <div class="field">
                    <label for="billing:city" class="required"><em>*</em><?php echo $this->__('City') ?></label>
                    <div class="input-box">
                        <input type="text" title="<?php echo $this->__('City') ?>" name="billing[city]" value="<?php echo $this->htmlEscape($this->getAddress()->getCity()) ?>" class="input-text required-entry" id="billing:city" />
                    </div>
                </div>
                <div class="field-2">
                    <label for="billing:region_id" class="required"><em>*</em><?php echo $this->__('State/Province') ?></label>
                    <div class="input-box">
                        <select id="billing:region_id" name="billing[region_id]" title="<?php echo $this->__('State/Province') ?>" class="validate-select" style="display:none;">
                            <option value=""><?php echo $this->__('Please select region, state or province') ?></option>
                        </select>
                        <script type="text/javascript">
                        //<![CDATA[
                            $('billing:region_id').setAttribute('defaultValue',  "<?php echo $this->getAddress()->getRegionId() ?>");
                        //]]>
                        </script>
                        <input type="text" id="billing:region" name="billing[region]" value="<?php echo $this->htmlEscape($this->getAddress()->getRegion()) ?>"  title="<?php echo $this->__('State/Province') ?>" class="input-text" style="display:none;" />
                    </div>
                </div>
            </li>
            <li class="fields">
                <div class="field">
                    <label for="billing:postcode" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?></label>
                    <div class="input-box">
                        <input type="text" title="<?php echo $this->__('Zip/Postal Code') ?>" name="billing[postcode]" id="billing:postcode" value="<?php echo $this->htmlEscape($this->getAddress()->getPostcode()) ?>" class="input-text validate-zip-international required-entry" />
                    </div>
                </div>
                <div class="field-2">
                    <label for="billing:country_id" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
                    <div class="input-box">
                        <?php echo $this->getCountryHtmlSelect('billing') ?>
                    </div>
                </div>
            </li>
            <li class="fields">
                <div class="field">
                    <label for="billing:telephone" class="required"><em>*</em><?php echo $this->__('Telephone') ?></label>
                    <div class="input-box">
                        <input type="text" name="billing[telephone]" value="<?php echo $this->htmlEscape($this->getAddress()->getTelephone()) ?>" title="<?php echo $this->__('Telephone') ?>" class="input-text required-entry" id="billing:telephone" />
                    </div>
                </div>
                <div class="field-2">
                    <label for="billing:fax"><?php echo $this->__('Fax') ?></label>
                    <div class="input-box">
                        <input type="text" name="billing[fax]" value="<?php echo $this->htmlEscape($this->getAddress()->getFax()) ?>" title="<?php echo $this->__('Fax') ?>" class="input-text" id="billing:fax" />
                    </div>
                </div>
            </li>
            <?php if(!$this->isCustomerLoggedIn()): ?>

    <?php $_dob = $this->getLayout()->createBlock('customer/widget_dob') ?>
    <?php $_gender = $this->getLayout()->createBlock('customer/widget_gender') ?>
        <?php if ($_dob->isEnabled() || $_gender->isEnabled()): ?>
            <li class="fields">
            <?php if ($_dob->isEnabled()): ?>
                <div class="field">
                    <?php echo $_dob->setDate($this->getQuote()->getCustomerDob())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
                </div>
            <?php endif; ?>
            <?php if ($_gender->isEnabled()): ?>
                <div class="field-2">
                    <?php echo $_gender->setGender($this->getQuote()->getCustomerGender())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
                </div>
            <?php endif ?>
            </li>
        <?php endif ?>

        <?php if ($this->isTaxvatEnabled()):?>
            <li><?php echo $this->getTaxvatHtml() ?></li>
        <?php endif; ?>

            <li class="fields" id="register-customer-password">
                <div class="field">
                    <label for="billing:customer_password" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
                    <div class="input-box">
                        <input type="password" name="billing[customer_password]" id="billing:customer_password" title="<?php echo $this->__('Password') ?>" class="input-text required-entry validate-password" />
                    </div>
                </div>
                <div class="field-2">
                    <label for="billing:confirm_password" class="required"><em>*</em><?php echo $this->__('Confirm Password') ?></label>
                    <div class="input-box">
                        <input type="password" name="billing[confirm_password]" title="<?php echo $this->__('Confirm Password') ?>" id="billing:confirm_password" class="input-text required-entry validate-cpassword" />
                    </div>
                </div>
            </li>
            <?php echo $this->getChildHtml('persistent.remember.me'); ?>
            <?php endif; ?>
            <?php if ($this->isCustomerLoggedIn() && $this->customerHasAddresses()):?>
                <li class="control">
                    <input type="checkbox" name="billing[save_in_address_book]" value="1" title="<?php echo $this->__('Save in address book') ?>" id="billing:save_in_address_book" onchange="if(window.shipping) shipping.setSameAsBilling(false);"<?php if ($this->getAddress()->getSaveInAddressBook()):?> checked="checked"<?php endif;?> class="checkbox" /><label for="billing:save_in_address_book"><?php echo $this->__('Save in address book') ?></label>
                </li>
            <?php else:?>
                <li class="no-display"><input type="hidden" name="billing[save_in_address_book]" value="1" /></li>
            <?php endif; ?>
        </ul>
        <?php echo $this->getChildHtml('persistent.remember.me.tooltip'); ?>
    </fieldset>
 </li>
<?php if ($this->canShip()): ?>
    <li class="control">
        <input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_yes" value="1"<?php if ($this->isUseBillingAddressForShipping()) {?> checked="checked"<?php }?> title="<?php echo  $this->__('Ship to this address') ?>" onclick="$('shipping:same_as_billing').checked = true;" class="radio" /><label for="billing:use_for_shipping_yes"><?php echo  $this->__('Ship to this address') ?></label></li>
    <li class="control">
        <input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_no" value="0"<?php if (!$this->isUseBillingAddressForShipping()) {?> checked="checked"<?php }?> title="<?php echo $this->__('Ship to different address') ?>" onclick="$('shipping:same_as_billing').checked = false;" class="radio" /><label for="billing:use_for_shipping_no"><?php echo $this->__('Ship to different address') ?></label>
    </li>
<?php endif; ?>
</ul>
<?php if (!$this->canShip()): ?>
    <input type="hidden" name="billing[use_for_shipping]" value="1" />
<?php endif; ?>
<div class="buttons-set" id="billing-buttons-container">
    <p class="required"><?php echo $this->__('* Required Fields') ?></p>
    <button type="button" title="<?php echo $this->__('Continue') ?>" class="button" onclick="billing.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
    <span class="please-wait" id="billing-please-wait" style="display:none;">
        <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="    <?php echo $this->__('Loading next step...') ?>" title="<?php echo $this->__('Loading next     step...') ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
    </span>
</div>
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
var billing = new Billing('co-billing-form', '<?php echo $this-        >getUrl('checkout/onepage/getAddress') ?>address/', '<?php echo $this-    >getUrl('checkout/onepage/saveBilling') ?>');
var billingForm = new VarienForm('co-billing-form');

//billingForm.setElementsRelation('billing:country_id', 'billing:region', '<?php echo $this->getUrl('directory/json/childRegion') ?>', '<?php echo $this->__('Select State/Province...') ?>');
$('billing-address-select') && billing.newAddress(!$('billing-address-select').value);

var billingRegionUpdater = new RegionUpdater('billing:country_id', 'billing:region', 'billing:region_id', countryRegions, undefined, 'billing:postcode');
if ($('onepage-guest-register-button')) {
    Event.observe($('onepage-guest-register-button'), 'click', function(event) {
        var billingRememberMe = $$('#billing-new-address-form li #remember-me-box');
        if(billingRememberMe.length > 0) {
            billingRememberMe = $(billingRememberMe[0].parentNode);
            if ($('login:guest') && $('login:guest').checked) {
                billingRememberMe.hide();
            } else if ($('login:register') && ($('login:register').checked ||     $('login:register').type == 'hidden')) {
                billingRememberMe.show();
            }
        }
    });
}
//]]>
</script>

thanks for putting up with this

Answer 1

The variable countryRegions is not defined.
You should change this line:

var billingRegionUpdater = new RegionUpdater('billing:country_id', 'billing:region', 'billing:region_id', countryRegions, undefined, 'billing:postcode');

to this one:

var billingRegionUpdater = new RegionUpdater('billing:country_id', 'billing:region', 'billing:region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'billing:postcode'); 

The same issue exists in shipping.phtml. Change this:

var shippingRegionUpdater = new RegionUpdater('shipping:country_id', 'shipping:region', 'shipping:region_id', countryRegions, undefined, 'shipping:postcode');

to :

var shippingRegionUpdater = new RegionUpdater('shipping:country_id', 'shipping:region', 'shipping:region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'shipping:postcode');

Answer 2

Add this in register.phtml to display all states of US:

                <div class="field">
                    <label for="region_id" class="required"><em>*</em><?php echo $this->__('State/Province') ?></label>
                    <div class="input-box">
                        <select id="region_id" name="region_id" title="<?php echo $this->__('State/Province') ?>" class="validate-select">
                            <option value=""><?php echo $this->__('Please select region, state or province') ?></option>
                    <?php
                    $this->setData('country_id','US'); // or 'FR'..., default is 'US'
                    $regions     =   $this->getRegionCollection();
                    foreach($regions as $region)
                    {
                        echo "<option value=$region[name]>".$region['name'] . "</option>";
                    }
                    ?>

                        </select>
                        <script type="text/javascript">
                        //<![CDATA[
                            $('region_id').setAttribute('defaultValue', "<?php echo $this->getFormData()->getRegionId() ?>");
                        //]]>
                        </script>

                        <input type="text" id="region" name="region" value="<?php echo $this->escapeHtml($this->getRegion()) ?>" title="<?php echo $this->__('State/Province') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('region') ?>" style="display:none;"   />
                    </div>
                </div>
            </li>
            <li class="fields">
                  <div class="field">
                    <label for="country" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
                    <div class="input-box">
                        <?php echo $this->getCountryHtmlSelect() ?>
                    </div>
                </div>

and replace bottom javascript with:

  <script type="text/javascript">
        var dataForm = new VarienForm('form-validate', true);
        new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>);
    </script>

Hope it will help