MYSQL/Ajax/PHP Generated Dropdown not passing values via 'GET'

Question

Seen a lot of threads on this, but not sure any are pertinent to what I have going on. I have tried a few 'solutions' but all to no avail. Here is a segment of my code:

<td><select name="County" onChange="getCity('findcity.php?county='+this.value)">

....

   <td><fieldset id="f2">
     <select name="Town">
     <option value="Any">Any Town</option>
     </select>
     </fieldset>
       </td></tr>

....

</td></tr>
           <tr>
           <td><fieldset id="f4">
           <input type="submit" name="Search!">
           </fieldset>
           </form>
           </td>
           </tr>

The Town Select is there at the beginning only as a placeholder. On the first dropdown being changed the second is then populated via the getCity() function. It passed the selected value to findcity.php and then uses mysql to populate it via findcity.php, and then replaces the TOWN select with a duplicate:

MySQL Generated one: (It works)

<select name="Town">
<option value="Any">Any Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
   <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
<? } ?>
</select>

And this is the function which does all the work:

<script>
function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }



    function getCity(strURL) {      

        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('f2').innerHTML=req.responseText;   

                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }


</script>

End result is this on the GET:

results.php?County=Kent&Sector=Any&Search%21=Submit 

If I submit without doing anything at all it works:

results.php?County=Bedfordshire&Town=Any&Sector=Any&Search%21=Submit

I imagine because it hasn't replaced the input box. I have used fieldsets hoping to eliminate the issue that I thought was caused because it was inside a DIV.

Sigh, I know there is a simple solution to this, I just can't remember what.

Also, bonus points if you tell me how to remove the '&Search..' part from the request :S No idea why the search button is putting it self in there, it never has in any other works I have done, is it because of fieldsets? I look forward to any answers, thanks in advance.

EDIT: If someone can even give an alternative way to populate the second drop down and fix this I will be quite content.

$county=$_GET['county'];
//$county =mysql_real_escape_string($county);
include('includes/dbc.php');

$query="SELECT DISTINCT `dir_town` FROM `directories` WHERE `dir_county` = '$county' ORDER BY `dir_town` ASC";
$result=mysql_query($query);?>
<select name="Town">
<option value="Any">Any</option>
<? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
    </select>

My dbc.php does all the connecting.

Answer 1

First off, to remove "Search!" from your querystring, replace

<input type="submit" name="Search!">

with

<input type="submit" value="Search!" />

"Search" is being added to the querystring because it has a name attribute. Remove the name and you remove the input from the querystring.

Update:

You may want to consider using jQuery for your AJAX call. It's a lot cleaner (you can remove that ugly getHMLHTTP() function). Just include the jQuery source

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Now you can start using jQuery calls and get rid of in-line onchange attributes:

<script language="javascript" type="text/javascript">
    $("select[name=County]").on('change', function() {
        $.get('findcity.php', 
            {
                county: $("this").val()
            }, function (data) {
                $("#city").replace(data);
            }
        );
    });

}
</script>

The callback function from the $.get() ($("#city").replace(data);) will replace the element whose id is "city" with whatever returns from findcity.php. Since this is supposed to be another dropdown, we'll just do this in the original form:

<select name="Town" id="city"></select>

Then when your output comes from findcity.php it will replace it with a populated dropdown list:

<select name="Town" id="city">
    <option value="Any">Any Town</option>
    <? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
</select>

Now, if you need to do something similar with the "Town" dropdown, repeat the jQuery .on() code for "Town" (since we gave it an ID we can refer to it either by name or by ID).

//$("#city") can be used instead of $("select[name=Town]") - both return the same element
$("select[name=Town]").on('change', function() { 
    // do something here
});