Forum Moderators: open
I have this imaginary search form wich contains 6 fields, 2 text fields and 4 drop downs (the first two are irrelevant). Those 4 drop downs are separated in two by two drop downs. The first two are Category and Subcategory, and the second two (3rd and 4th) are Counties and Cities.
Now, my intention was to fill the drop downs with row results from mysql, and that works fines. When I do a test for each of the drop downs separately they also work fine. But when I try to implement those two drop downs into one big form, I get the problem with cancellation of the first two drop down values in exchange for remembering the second two. The form remembers only the 3rd and 4th selected form values and, because of the javascript reload function (which does the auto-filling and reloading of the forms with selected values and sub values) it seems I can't get the 4 drop downs to work together.
I am not allowed to post a link to help you visualize my problem, but I tried to explain it to the detail and will provide additional file to anyone willing to help me over this in private.
The first form with Categories and subCategories are provided like this:
The <head> gets the mentioned javascript:
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='dd.php?cat=' + val ;
}</script>
Than, in the <body> section I have the first two drop downs displayed with this code:
<?
@$cat=$_GET['cat']; // Use this line or below line if register_global ///////// Getting the data from Mysql table for first list box//////////
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category");
///////////// End of query for first list box////////////
/////// for second drop down list we will check if category is selected else we will display all the subcategory/////
if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory");
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); }
////////// end of query for second subcategory drop down list box ///////////////////////////
echo "<form method=post name=f1 action='dd-check.php'>";
/// Add your form processing page address to action in above line. Example action=dd-check.php////
////////// Starting of first drop downlist /////////
echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Kategorija</option>";
while($noticia2 = mysql_fetch_array($quer2)) {
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";}
else{echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select><br />";
////////////////// This will end the first drop down list ///////////
////////// Starting of second drop downlist /////////
echo "<select name='subcat'><option value=''>Podkategorija</option>";
while($noticia = mysql_fetch_array($quer)) {
echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";
////////////////// This will end the second drop down list ///////////
echo "<input type=submit value=Submit>";
echo "</form>";
?>
The second pair of drop downs are in a separate file and the code for calling the javascript is:
<head>
<SCRIPT language=JavaScript>
function reload(form)
{
var zup=form.zupanija.options[form.zupanija.options.selectedIndex].value;
self.location='zupanije.php?zupanija=' + zup ;
}
</script>
The <body> contains:
<?@$zupanija=$_GET['zupanija'];
$popisZupanija=mysql_query("SELECT DISTINCT imeZupanije, brZupanije FROM zupanije order by imeZupanije ASC");
/////// for second drop down list we will check if category is selected else we will display all the subcategory/////
if(isset($zupanija) and strlen($zupanija) > 0)
{
$popisGradova=mysql_query("SELECT DISTINCT Grad FROM gradovi where brZupanije=$zupanija order by Grad");
}
else{
$popisGradova=mysql_query("SELECT DISTINCT Grad FROM gradovi order by mbGrada");
}
////////// end of query for second subcategory drop down list box
echo "<form method=post name=f1 action='zupanije_gradovi-check.php'>";
////////// Starting of first drop downlist /////////
echo "<select name='zupanija' onchange=\"reload(this.form)\"><option value=''>Županija</option>";
while($obavijest2 = mysql_fetch_array($popisZupanija)) {
if($obavijest2['brZupanije']==@$zupanija){echo "<option selected value='$obavijest2[brZupanije]'>$obavijest2[imeZupanije]</option>"."<BR>";}
else{echo "<option value='$obavijest2[brZupanije]'>$obavijest2[imeZupanije]</option>";}
}
echo "</select><br />";
////////////////// This will end the first drop down list ///////////
////////// Starting of second drop downlist /////////
echo "<select name='grad'><option value=''>Grad</option>";
while($noticia = mysql_fetch_array($popisGradova)) {
echo "<option value='$noticia[Grad]'>$noticia[Grad]</option>";
}
echo "</select>";
////////////////// This will end the second drop down list ///////////
echo "<input type=submit value=Submit>";
echo "</form>";
?>
So, these two drop downs work perfectly if they are in separate files, but when I try to incorporate the two in one bigger file I get the problem I described above, the latter two drop downs work and the first two do not work, that is, they are canceled because of the selected values of the main category and subcategory of the 3rd and 4th drop down.
I think the problem is in the javascript for those dropdowns in the head which is as follows:
the <head> section:
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='final.php?cat=' + val ;
}function reload(form)
{
var val=form.zupanija.options[form.zupanija.options.selectedIndex].value;
self.location='final.php?zupanija=' + val ;
}
</script>
Appologies if this ain't the right forum to ask my question, I post this in good intention. Anyone willing to help is highly respected. Thanks in advance.
Mislav
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='final.php?cat=' + val ;
}
function reload(form)
{
var val=form.zupanija.options[form.zupanija.options.selectedIndex].value;
self.location='final.php?zupanija=' + val ;
}
<script type="text/javascript">
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
var val2=form.zupanija.options[form.zupanija.options.selectedIndex].value;
self.location='final.php?cat=' + val +'&zupanija=' + val ;
}
</script>
Thank you for your response! Your code is pretty much what I wanted, except there is one strange behaviour with it. Every time I pick from a main category, the second part of the drop down list (the County list) also gets picked by the same ID as the Category.
I.E.
If I have a system like this:
Category: 1) First
2) Second
3) Third
subCategory: 1) a
2) b
3) c
--------------------
County: 1) County A
2) County B
3) County C
City: 1) City A
2) City B
3) City C
Now, if I, i.e., pick from a Category number 1) First, than subCategory list is generating fine (with all the subcategories from First Category), but what happens also is that at the same time my County gets generated!
The URL than looks like this:
filename.php?cat=6&zupanija=6
At the same time, the subCategory pick gets lost, and every time I pick another County, the subCategory also gets lost. It seems like cat number and "zupanija" number are somehow recognized as same. I can provide you the links to files if you pm me.
Once again, very good job and thx for cooperation. Hope we'll manage to solve this soon..
EG JS:
function reloadFirst(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='final.php?cat=' + val ;
}
function reloadSecond(form)
{
var val=form.zupanija.options[form.zupanija.options.selectedIndex].value;
self.location='final.php?zupanija=' + val ;
}then you need to change your select box to someting resembleing this:
<select name='cat' onchange="reloadFirst(this.form)">
and
<select name='cat2' onchange="reloadSecond(this.form)\>
