jQuery submit data not refresh - php

Question

Is this the best way of doing this...
I have some drop downs and when a user selects an option I take their selection and send it to a php page to query a database then return that data to a div...
code is below
<?PHP
include('includes/inc_header.php');
#<-- SQL QUERIES START ------------------------------------------->
$sql1 = "SELECT Team.ShortLabel ShortLabel,Team.Label Label
FROM adlTeam Team
INNER JOIN adlPlanet Planet ON Team.TeamKey = Planet.TeamKey
GROUP BY ShortLabel";
$queryrow1 = mysql_query($sql1);
#<-- SQL QUERIES END ------------------------------------------->
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#selectOwner").change(function ()
{
$.post('process.php', $(this).serialize()
,function(data){$("#ownerInfo").html(data)});
return false;
});
$("#selectZoom").change(function ()
{
$.post('zoomchange.php', $(this).serialize()
,function(data)
{
$("#mapchanges").html(data)
});
return false;
});
$("#nameStatus").change(function ()
{
$.post('mapchanges.php', $(this).serialize(), function(data)
{
$("#zoomchanges").html(data)
});
return false;
});
});
</script>
<div id="primary_content">
<form name="myform" id="myform" action="" method="POST">
<h3>SELECT TEAM</h3>
<select name="selectOwner" id="selectOwner" size="10"
style = "width:250px;margin-top:-12px;margin-left:15px;">
<?PHP
while ($clanlist = mysql_fetch_array($queryrow1))
{
#<-- SQL QUERIES START ------->
$sql3 = "SELECT Red, Green, Blue FROM adlteam
WHERE ShortLabel = '".$clanlist['ShortLabel']."'";
$queryrow3 = mysql_query($sql3);
$colors = mysql_fetch_array($queryrow3);
#<-- SQL QUERIES END ------------>
?>
<option id="ownerID_input" name="ownerID"
value="<?php
echo $clanlist['ShortLabel']; ?>"><?php echo $clanlist['Label']; ?>
</option>
<?PHP
}
?>
</select>
</form>
<div id="ownerInfo"></div>
<div id="planetInfo"></div>
<div id="mapchanges"></div>
<div id="zoomchanges"></div>
<div id="mapoptions">
<span class="h4">ZOOM:</span>
<select name="selectZoom" id="selectZoom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<input type="checkbox" style="margin-top:10px;"
name="nameStatus" id="nameStatus">
<span class="pinfo">Planet Names</span>
</div>
</div>
<div id="secondary_content">
<iframe src="mapgendisplay.html" name="testFrame" id="testFrame"
width="695" height="564" scrolling="no"
frameborder="0" allowtransparency></iframe>
</div>
<?PHP include('includes/inc_footer.php'); ?>

Answer 1

From what I can see, that does look like a good way of doing what you're trying to do. More information would be useful though.
It's possible you could reduce the code by making the functions more general:
var phpfile = new Array();
phpfile["selectZoom"] = "zoomchange.php";
...
...
var elementID = new Array();
elementID["selectZoom"] = "#mapchanges";
...
...
$("select").change(function() {
$.post(
phpfile[$(this).id()],
$(this).serialize(),
function(data) {
$(elementID[$(this).id()]).html(data)
}
);
});