I have 2 simple drop down lists one dependent on the other in a php include.
When one is selected it refreshes the page and then populates the second with the correct data, (works great).
The problem is that it refreshes the whole page instead of just the include file.
Is there a way to do just refresh the include? I have looked at many other examples (Ajax, Javascript etc) on here and other sites and cannot seem to get it to work.
A huge thank you in advance to anyone who can point me in the right direction.
<form enctype="multipart/form-data" action="advanced_search2.php" method="POST">
<?php require 'config.php'; ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<?
echo '<div id="publication">';
echo "<select name='cat'><option value=''>Select one</option>";
$quer2="SELECT DISTINCT id,publication FROM publication WHERE appear = 'Yes' and Search = 'Yes'";
foreach ($dbo->query($quer2) as $noticia2) {
echo "<option selected value='$noticia2[publication]'>$noticia2[publication]</option>"." <BR>";
}
echo "</select>";
echo '</div>';
?>
<?
echo '<div id="section">';
echo "<select name='subcat'><option value=''>Select one</option>";
$quer="SELECT DISTINCT section FROM sandbox WHERE publication = '$cat' AND appear = 'Yes'";
foreach ($dbo->query($quer) as $noticia) {
echo "<option value='$noticia[section]'>$noticia[section]</option>";
}
echo "</select>";
echo '</div>';
?>
<form>
<script>
$('#publication').change(function(){
var page = $( this ).attr('data-page');
$.ajax({
type:'POST',
url:page,
success: function(response){
$('#section').html(response);
}
});
})
</script>