How to use AJAX to populate state list depending on Country list?

Question

I have the code below that will change a state dropdown list when you change the country list.

How can I make it change the state list ONLY when country ID number 2234 and 224 are selected?

If another country is selected is should change into this text input box

<input type="text" name="othstate" value="" class="textBox">

The form

<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>

<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>

The javascript

<script>
function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {
        document.getElementById('statediv').innerHTML=req.responseText;
     } else {
       alert("There was a problem while using XMLHTTP:\n" + req.statusText);
     }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>

Answer 1

Just check the countryId value before you do the AJAX request and only perform the request if the countryId is in the allowable range. In the case where the countryId doesn't match, I would hide the select (probably clear it's value, too) and show an already existing input that was previously hidden. The reverse should be done if an allowable country is chosen.

jQuery example below:

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
      <option>Select Country</option>
      <option value="223">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>

   <select style="background-color: #ffffa0" name="state">
      <option>Select Country First</option>
   </select>

   <input type="text" name="othstate" value="" class="textBox" style="display: none;">
</form>

$(function() {
    $('#country').change( function() {
        var val = $(this).val();
        if (val == 223 || val == 224) {
            $('#othstate').val('').hide();
            $.ajax({
               url: 'findState.php',
               dataType: 'html',
               data: { country : val },
               success: function(data) {
                   $('#state').html( data );
               }
            });
        }
        else {
           $('#state').val('').hide();
           $('#othstate').show();
        }
    });
});

Answer 2

I think the simple thing to do is to provide a state dropdown and a text entry box with different ids. Set the display of both to none and then you just need to surround your contents of getState() with

if (countryId == 233 || countryId == 234) {
   /* Ajax state population here */

   dropdownId.display = 'block';
   textEntryId.display = 'none';
}
else  {
   textEntryId.display = 'block';
   dropdownId.display = 'none';
}

(where dropdownId and textEntryId are the ids of the relevant UI components) so you enable/display the display for the state dropdown or the text entry upon selection.

JQuery is all well and good, but I wouldn't introduce it just to solve this problem.

Answer 3

How can we populate state combobox from database on selection of country from country combobox which at first is populated from database