How to get rid of jquery error

Question

Below is my full code, its basic, you select a country and it shows, or hides the correct form underneath, problem is it gives an error

"getState" is not define

Now I am a total noob at this but how do you debug these kind of errors?

<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> 

<script> 
$(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(); 
        } 
    }); 
}); 
</script>

**UPDATED CODE PARTIALLY WORKING**

<script>
$(document).ready(function() {
   getState();
});

function getState() {
    $('#country').change( function() {         
        var val = $(this).val();
     if (val == 223) {
      $('#state').val('').show();
         $('#othstate').hide();
     }else {
        $('#state').val('').hide();
        $('#othstate').show();
     }
   });
 }
</script>

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" id="country">
      <option>Select Country</option>
      <option value="223" selected="selected">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>
<div id="state">
   <select style="background-color: #ffffa0" name="state" id="state">
      <option>Select State</option>
      <option value="1">Florida</option>
      <option value="2">New York</option>
      <option value="3" selected="selected">Georgia</option>
      <option value="4">California</option>
   </select>
</div>
<div id="othstate"><input type="text" name="othstate" id="othstate" value="" class="textBox"></div>
</form>

Answer 1

I think you just need to remove the onchange="getState(this.value)" attribute from your select tag, since the getState JavaScript function is no longer needed/being used.

Answer 2

You haven't named your function getState.... it doesn't know where to go to find the definition of the function "getState"!

also you have not set up your events correctly... should look like this:

<script>
$(document).ready(function() {
   getState();
});

function getState() {
    $('#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();
     }
   });
 }
</script>

you may also need to remove the "onChange" from the select tag as the other poster mentioned. in jQuery, you don't actually set the events in the HTML (a benefit!), you just bind the events to elements based on their tag, id, or CSS class.

EDIT: I've noticed you're using name="country" instead of id="country" or class="country"... this will prevent you from making proper selections

Answer 3

You should remove the call to getState in your select element. Also, I noticed that in your script you're referencing the names of the elements as if they are IDs. You should either change your name attributes to id attributes, or use selectors like "select[name='country']".