Disable a field in HTML form using Javascript depend on a chosen value from a dropdown list

Question

I am new to Javascript. I tried searching sites to figure this out myself but I was unsuccessful. I am creating a form using HTML and Javascript.

I am stuck on the following, not sure what am I missing:

User will choose a country, depending on what the user will select, I need to disable United State field or City/Province field.

If the user selects "United States" from id="txtCountries" then the id="txtCustomerStates" remains enabled and id="txtCityProvince" disabled.

If the user selects any other country and not "United States" then vice versa need to happen - id="txtCustomerStates" disabled and id="txtCityProvince" enabled.

Currently - no matter what the choice is, txtCityProvince is enabled and txtCustomerStates is disabled.

The following is what I did: Javascript file - file name disable.js:

//If user selects "United States" - City/Province (International) will be disabled
//If user does not selects "United States - State (USA) will be disabled

function disableState() {
    if (document.getElementById("txtCountries").value === "United States") 
    {
        // document.getElementById("txtCustomerStates").disabled='false';
        document.getElementById("txtCityProvince").disabled='true';
    }
    else  
    {
        // document.getElementById("txtCityProvince").disabled='false';
        document.getElementById("txtCustomerStates").disabled='true';
    } 
}

The HTML file: Countries Section:

<div id="divCountries" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="txtcountries">Country:</label>
</div>
 <div class="LeftField">
   <div class="formField34">
     <select id="txtCountries" type="text" name="Countries" alt="Countries"   
     title="Countries" onchange="javascript:disableState();">
       <option value=""></option>
       <option value="Afghanistan">Afghanistan</option>
       <option value="Albania">Albania</option>
       <option value="Algeria">Algeria</option>
       <option value="UnitedStates">United States</option>
      </select>
    </div>
 </div>

United States Section:

 <div class="leftLabel labelWidth20">
 <label for="txtCustomerStates">State (USA):</label>
 </div>
 <div class="LeftField">
 <div class="formField40">
  <select id="txtCustomerStates" type="text" name="State" alt="United 
   States" title="United States">
      <option value=""></option>
      <option value="Alabama">Alabama</option>
      <option value="Alaska">Alaska</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Arizona">Arizona</option>
      <option value="Arkansas">Arkansas</option>
   </select>
  </div>
  </div>

The non United States section:

<div id="divCityProvince" class="fieldRow">
 <div class="leftLabel labelWidth20">
  <label for="txtCityProvince">City/Province/Town<br>(International):  
  </label>
</div>
<div class="formField34">
<input id="txtCityProvince" type="text" class="textfield" 
 alt="City/Province/Town (International)" title="City/Province/Town 
 (International)">
 </div>  
</div>

Thank you in advance for your help, IS

Answer 1

The whole solution :) Only javascript section is modified.

<div id="divCountries" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="txtcountries">Country:</label>
</div>
 <div class="LeftField">
   <div class="formField34">
     <select id="txtCountries" type="text" name="Countries" alt="Countries"   
     title="Countries" onchange="disableState()">
       <option value=""></option>
       <option value="Afghanistan">Afghanistan</option>
       <option value="Albania">Albania</option>
       <option value="Algeria">Algeria</option>
       <option value="UnitedStates">United States</option>
      </select>
    </div>
 </div>

 <div class="leftLabel labelWidth20">
 <label for="txtCustomerStates">State (USA):</label>
 </div>
 <div class="LeftField">
 <div class="formField40">
  <select id="txtCustomerStates" type="text" name="State" alt="United 
   States" title="United States">
      <option value=""></option>
      <option value="Alabama">Alabama</option>
      <option value="Alaska">Alaska</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Arizona">Arizona</option>
      <option value="Arkansas">Arkansas</option>
   </select>
  </div>
  </div>


<div id="divCityProvince" class="fieldRow">
 <div class="leftLabel labelWidth20">
  <label for="txtCityProvince">City/Province/Town<br>(International):  
  </label>
</div>
<div class="formField34">
<input id="txtCityProvince" type="text" class="textfield" 
 alt="City/Province/Town (International)" title="City/Province/Town 
 (International)">
 </div>  
</div>

<script>
function disableState() {

    if (document.getElementById("txtCountries").value === "UnitedStates") 
    {
       document.getElementById("txtCustomerStates").disabled=false;
        document.getElementById("txtCityProvince").disabled='true';

    }
    else  
    {
    document.getElementById("txtCityProvince").disabled=false;        
    document.getElementById("txtCustomerStates").disabled='true';

    } 
}
</script>

Answer 2

Try this ;)

Put a space in value="UnitedStates":

<option value="United States">United States</option>

Answer 3

See this fiddle

That was because the value that was returned from document.getElementById("txtCountries").value was UnitedStates and not United States.

Please note that the option for United States was as follows

<option value="UnitedStates">United States</option>

Notice that there is no space between the United and States in the value.

JS

function disableState() {
  if (document.getElementById("txtCountries").value === "UnitedStates") {
    document.getElementById("txtCityProvince").disabled = 'true';
  } else {
    document.getElementById("txtCustomerStates").disabled = 'true';
  }
}