problem with Autocomplete plus Javascript to change some <p> text

problem with Autocomplete plus Javascript to change some <p> text

I'm real new at this.  I have a 1 tier Autocomplete working (below), thanks to a tutorial from Jensbits.com. It autocompletes town names and adds the county from a MySQL database.  When I added some Javascript to change an instruction phrase based on the town selection, the Autocomplete stopped working and the JS change does not function either.  The JS is assembled from several other tutorials, but I must not have it correct.  Corrections would be appreciated.  Please be very specific because I don't know JS.  The code is below. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>jQuery UI 1 Tier Autocomplete - PHP Example</title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">   
        <link rel="stylesheet" type="text/css" href="getmeshelter.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script type="text/javascript">
        $(function()
        {
            //Clear values upon refresh. //
            $('#countyOfTown').val("");
                           
            $("#town").autocomplete
            ({
                source: "getTownAndCounty.php",
                minLength: 2,
                select: function(event, ui)
                {
                    $('#state_id').val(ui.item.id);
                    $('#countyOfTown').val(ui.item.countyName);
                }
            });
        });
       
        //Based on town selection, set the instruction phrase  //
            var test = “town”;
            switch (test)
            {
            case “Rochester”:getElementById('stateMessage').innerHTML='Instruction phrase 1'
            break;
            case “Alden”:getElementById('stateMessage').innerHTML='Instruction phrase 2'
            break;
            case “Buffalo”:getElementById('stateMessage').innerHTML='Instruction phrase 3'
            break;
            case “Albany”:getElementById('stateMessage').innerHTML='Instruction phrase 4'
            break;
            //  if no match is found //
            default:getElementById('stateMessage').innerHTML='Instruction phrase 5'
            break;
            };
       
        </script>
    </head>
   
<body>

<div>
<!-- the form action is to execute itself. Check if another command is better at stopping XSS attacks-->
<form action="<?php echo $PHP_SELF;?>"  method="post">
<fieldset>
<legend>jQuery UI Autocomplete 1 Tier Example - PHP Backend to MySQL</legend>

<p>Start typing the name of a town or city, then select it in the dropdown box.</p>

<p><label for="town">Enter town or city: </label>
    <input type="text" id="town"  name="town" size="50" maxlength="75" />
    <input type="text" id="countyOfTown" name="countyOfTown" readonly="readonly" />
</p>
    <input type="hidden" id="state_id" name="state_id" />

<p> <id="stateMessage"> This instruction phrase is supposed to change.</p>

<p><input type="submit" id="submit" name="submit" />
</p>
</fieldset>
</form>

<?php
if (isset($_POST['submit']))
{
echo "<p>";
    while (list($key,$value) = each($_POST)){
    echo "<strong>" . $key . "</strong> = ".$value."<br />";
    }
echo "</p>";
}
?>

</div>
</body>
</html>