CODEWITHSUNDEEP
javascripthtmlmagento
Romanov
Romanov

Reputation: 41

Magento: Hide/Show input field based on Selected Country

I would like to hide/show || disable/enable an input field based on the selected country in magento checkout page. I tried this code separated from magento and it's working perfectly but when I applied it in my magento, it's not working. I just edited the billing.phtml from IWD checkout extension and nothing from magento core.

here is the javascript:

$(function() {
var $cid = $(document.getElementById("billing:country_id")), // Country ID in magento
$custom = $(document.getElementById("billing:custom")); //my custom input field

$cid.change(function() {
    if ($cid.val() == 'US') {
        $custom.removeAttr('disabled');
        alert('working1');
    } else {
        $custom.attr('disabled', 'disabled').val('');
        alert('working2');
    }
}).trigger('change');
});

Here's the sample billing form template from IWD / Magento:

<li class="fields">
     <label for="billing:country_id" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
     <div class="input-box">
         <?php echo $this->getCountryHtmlSelect('billing') ?>
     </div>
</li>
<li class="fields">
      <label for="billing:custom" class="required"><em>*</em><?php echo $this->__('Custom Field') ?></label>
      <div class="input-box">
            <input type="text" name="custom[custom]" value="<?php echo $this->htmlEscape($this->getQuote()->getCustom()) ?>" title="<?php echo $this->__('Custom Field') ?>" class="input-text custom_id" id="billing:custom" />
       </div>
 </li>

Country Select getCountryHtmlSelect function is a built-in mage function:

public function getCountryHtmlSelect($type)
{
    $countryId = $this->getAddress()->getCountryId();
    if (is_null($countryId)) {
        $countryId = Mage::helper('core')->getDefaultCountry();
    }
    $select = $this->getLayout()->createBlock('core/html_select')
        ->setName($type.'[country_id]')
        ->setId($type.':country_id')
        ->setTitle(Mage::helper('checkout')->__('Country'))
        ->setClass('validate-select')
        ->setValue($countryId)
        ->setOptions($this->getCountryOptions());
    if ($type === 'shipping') {
        $select->setExtraParams('onchange="if(window.shipping)shipping.setSameAsBilling(false);"');
    }

    return $select->getHtml();
}

Upvotes: 0

Views: 3425

Answers (1)

ABE
ABE

Reputation: 706

<input id="billing:country_id"></input> 
<input id="billing:custom" disabled="disabled;"></input>

code

$(function() {
var $cid = $(document.getElementById("billing:country_id"));
$custom = $(document.getElementById("billing:custom")); 

$cid.change(function() {
    if ($cid.val() == 'US') {
        $custom.prop('disabled', false);
        console.log('working1');
    } else {
        $custom.prop('disabled', true).val("");
        console.log('working2');
    }
}).trigger('change');
});

http://codepen.io/anon/pen/dMqYgK?editors=1011

Upvotes: 2

Related Questions