Magento 1.7 Billing Info – Fix Stuck on Billing Info Tab

magento-1.7

I'm having a problem with a Magento checkout which I can't seem to solve. I inherited this site from previous developers and to be honest, it's had no end of problems.

However, we've recently started to see an odd error in the checkout. The user fills in their Billing Information, clicks 'Continue' and then… nothing happens. Well, apparently not.
The Shipping Information tab below becomes active BUT the tab does not open up. So the customer doesn't see it and so they think they can't go any further. This is disastrous for the client as they then lose the sale.

Looking at the code through Firebug, I can see that the page has a JS error:

TypeError: this.regionSelectEl is null

if (this.regionSelectEl.options.length<=1) {

(form.js line 178)

I don't know what's suddenly started to cause this or how to solve it.
Can anyone shed any light on it?
The site is an operational site, and can be seen in action here: www.knightsbridgeneckwear.co.uk

Please help!

The site uses Magento CE version 1.7.0.2

Best Answer

If you look at your theme, the file template/checkout/onepage/billing.php you should see this code or something looking alike somewhere (I'm on 1.9.1 but I guess what your error is) :

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

This enable the RegionUpdater, which make the region select appear with the good options once the country is selected.

I think what your error is, is that either your region select element (this.regionSelectEl in the Javascript class RegionUpdater) is not set with the good id (it is the third element of the function above, 'billing:region_id' that will become 'this.regionSelectEl') or this element is not set in the template.

In my 1.9.1 edition, it appears like that :

<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->escapeHtml($this->getAddress()->getRegion()) ?>"  title="<?php echo $this->__('State/Province') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('region') ?>" style="display:none;" />
</div>

Try to check if those both things are set right, and it should correct your present Javascript error.

Related Topic