category and sub category drop down form problem

ricky spires · July 11, 2011

Hello,

I have been searching and trying all sorts of ways to get my sub categories drop down to show the correct info after selecting a category from the main drop down but im getting stuck.

It's pulling the categories and sub categories from the mysql database fine but no matter which main category i pick it keeps showing the same result in the sub category.

My brother said i need to use some sort of onchange do this so the sub category list refreshs but everything i have tried doesn't work..

PLEASE could some one help.

MANY MANY THANKS

This is the category form

  <select name="job_cats" style="width:165px">
    <?PHP

	$query1 = "SELECT * FROM job_cats";
	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);

	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);
	$job_cats_title1 = $row1['title'];
	$job_cats_id1 = $row1['id'];


echo '<option value="'.$job_cats_id1.'">'.$job_cats_title1.'</option>';

	echo $job_cats_id1;
}
    ?>
    </select>

this would echo this in the main category list:

cat1

cat2

cat3

cat4

this is the sub category form

  <select name="job_sub_cats" style="width:165px">
  
    <?PHP 
	$query1 = "SELECT * FROM job_sub_cats WHERE job_cats_id = $job_cats_id1";

	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);


	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);

	$sub_cats_id1 = $row1['id'];
	$sub_cats_title1 = $row1['subTitle'];
	$cats_id1 = $row1['job_cats_id'];

	echo '<option value="'.$sub_cats_id1.'">'.$cats_id1.'</option>';

	}
    ?>
    </select>

this should echo this:

1

2

3

4

but it keeps echoing just the number 4.

THANKS

PLEASE HELP

ricky

teynon · July 11, 2011

Please post all your code. I need to at least see how $job_cats_id1 is being set.

ricky spires · July 11, 2011

Thanks for your quick reply..

<?PHP
include("dbconnect.php");
$error = '';


if (isset($_POST['submit'])){


		if ($_POST['title']==''){
			$star1 = '<span class="redStar">*</span>';

		}

			if ($_POST['cat']==''){
			$star2 = '<span class="redStar">*</span>';

		}
		if ($_POST['subCat']==''){
			$star3 = '<span class="redStar">*</span>';

		}

		if ($_POST['description']==''){
			$star3 = '<span class="redStar">*</span>';

		}



  		   $format = '0'; 
       
	   if ($_POST['title']=='' || $_POST['cat']=='Select a Job Category' ||  $_POST['subCat']=='Select a Job sub category' || $_POST['description']==''){

			$error = '<br><br><span class="title_red_13_bold">Sorry, but all areas marked with * must be completed</span><br><br>';
			$format='1';
	   
	    }

	     

		      if($format=='0'){


			  $title = addslashes($_POST['title']);
			  $description = addslashes($_POST['description']);
			  $job_cats_id = addslashes($_POST['job_cats']);
			  $sub_cats_id = addslashes($_POST['job_sub_cats']);


			  //RADIO BUTTON
			  $salary = addslashes($_POST['salary']);
			  
			  //CHECK BOXES
			  $option1 = addslashes($_POST['option1']);
			  $option2 = addslashes($_POST['option2']);
			  
			  $tick1 = addslashes($_POST['tick1']);
			  $tick2 = addslashes($_POST['tick2']);
			  $tick3 = addslashes($_POST['tick3']);
			  $tick4 = addslashes($_POST['tick4']);
			  
			  // CHECK IF BOXES ARE TICKED
			  $option1 = "";
			  $option2 = "";


			    if ($tick1){
						$option1 .= $tick1.',';
					 }
				if ($tick2){
						$option1 .= $tick2.',';
					 }
				if ($tick3){
						$option2 .= $tick3.',';
					 }
				if ($tick4){
						$option2 .= $tick4.',';
					 }		 

			// INPUT DATE & TIME
				  $date = date('Y-m-d');


			 //GOT TO HERE.....

			$sql = "INSERT INTO jobs (title, datePosted, cat_id, subCat_id, option1, option2, salary, description) 

			VALUES ('$title', '$date', '$job_cats_id', '$sub_cats_id', '$option1', '$option2', '$salary', '$description')";

			$query = mysql_query($sql) or die ("124 - insert into jobs" .mysql_error());

			$job_id = mysql_insert_id();
   


			if($query){

					header("Location:add_job.php");

			}else{ 

					if($format=='1'){
				      
					  $title = addslashes($_POST['title']);
					  $description = addslashes($_POST['description']);
					  $cat = addslashes($_POST['cat']);
					  $subCat = addslashes($_POST['subCat']);
										  
			 		  $job_cats_id = addslashes($_POST['job_cats']);
					  $sub_cats_id = addslashes($_POST['job_sub_cats']);

        
					  
					  
					  //CHECK BOXES
					  $option1 = addslashes($_POST['option1']);
					  $option2 = addslashes($_POST['option2']);
					  
					  $tick1 = addslashes($_POST['tick1']);
					  $tick2 = addslashes($_POST['tick2']);
					  $tick3 = addslashes($_POST['tick3']);
					  $tick4 = addslashes($_POST['tick4']);
					  
					  // CHECK IF BOXES ARE TICKED
					  $option1 = "";
					  $option2 = "";

						if ($tick1){
						$option1 .= $tick1.',';
						}
						if ($tick2){
						$option1 .= $tick2.',';
						}
						if ($tick3){
						$option2 .= $tick3.',';
						} 
				        if ($tick4){
						$option2 .= $tick4.',';
					    }	

						 $date = date('Y-m-d');


					    $error = '<br><br><span class="title_red_13_bold">Sorry, but all areas marked with * must be completed</span><br><br>';

					}// end $format

			} // end if($query - else
	}// end $format		
} // isset

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Keywords" content="" />
<title>add a job</title>
<link href="style.css" rel="stylesheet" type="text/css" />


           
</head>
<body>
<?PHP if ($error) { echo $error; }?>
       
<h1>ADD A JOB</h1>
<BR />
<form action="<?PHP echo $_SERVER['PHP_SELF']; ?>" method="post" name="form1">


<table width="691" border="0" align="center" cellpadding="5">
  <tr>
    <td width="106" valign="top" class="verdana_12_bold"><div align="left">Title:</div></td>
    <td colspan="2" align="center" valign="top"><div align="left">
      <input type="text" name="title" value=""/>    
    </div></td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><span class="verdana_12_bold">Description:</span></div></td>
    <td colspan="2" align="center" valign="top"><div align="left">
      <textarea name="description" value="<?PHP echo htmlentities($description);
   ?>" cols="45" rows="5"></textarea>
    </div></td>
  </tr>
  
  <tr>
    <td width="106" valign="top" class="verdana_12_bold"><div align="left">Categories:</div></td>
    <td colspan="2" align="center" valign="top"><div align="left">
   
   
    <select name="job_cats" style="width:165px">
    <?PHP
    if ($format=='1' && $_POST['job_cats_title']) {
	echo '<option value="'.$_POST['job_cats_title'].'">'.$_POST['job_cats_title'].'</option>';
	'<option value="Select a Job Category">------</option>';
    } else {
	echo '<option value="Select a Job Category">Select a Job Category</option>';
    }
    ?>
    <?PHP

	$query1 = "SELECT * FROM job_cats";
	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);

	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);
	$job_cats_title1 = $row1['title'];
	$job_cats_id1 = $row1['id'];


echo '<option value="'.$job_cats_id1.'">'.$job_cats_title1.'</option>';

	echo $job_cats_id1;
}
    ?>
    </select>
      
    
      
      <br/>
      <br/>
      
    <select name="job_sub_cats" style="width:165px">
    <?PHP
    if ($format=='1' && $_POST['job_sub_cats']) {
	echo '<option value="'.$_POST['job_sub_cats'].'">'.$_POST['job_sub_cats'].'</option>';
	'<option value="Select a Job Sub category">------</option>';
    } else {
	echo '<option value="Select a Job sub category">Select a Job sub category</option>';
    }
    ?>
    <?PHP 
	$query1 = "SELECT * FROM job_sub_cats WHERE job_cats_id = $job_cats_id1";

	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);


	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);

	$sub_cats_id1 = $row1['id'];
	$sub_cats_title1 = $row1['subTitle'];
	$cats_id1 = $row1['job_cats_id'];

	echo '<option value="'.$sub_cats_id1.'">'.$cats_id1.'</option>';

	}
    ?>
    </select>
    
  
    </div></td>
  </tr>
  <tr valign="top">
    <td><div align="left"><span class="verdana_12_bold">Options:</span></div></td>
    <td colspan="2" align="left" class="title_red_13"><div align="left">Option1:</div></td>
  </tr>
  <tr>
    <td rowspan="5" valign="top"> </td>
    <td align="center" valign="top"><div align="center">
        <input type="checkbox" name="tick1" value="1" <?PHP //if ($format=='1' && $_POST['tick1']) { echo 'checked="checked"'; }?> />
      </div></td>
    <td width="474">Tick 1</td>
  </tr>
  <tr>
    <td align="center" valign="top"><div align="center">
        <input type="checkbox" name="tick2" value="2" <?PHP //if ($format=='1' && $_POST['tick2']) { echo 'checked="checked"'; }?>/>
      </div></td>
    <td>Tick 2</td>
  </tr>
  <tr valign="top">
    <td colspan="2" align="left" class="title_red_13"><div align="left">Option2:</div></td>
  </tr>
  <tr>
    <td align="center" valign="top"><div align="center">
        <input type="checkbox" name="tick3" value="3" <?PHP //if ($format=='1' && $_POST['tick3']) { echo 'checked="checked"'; }?>/>
      </div></td>
    <td>Tick 3</td>
  </tr>
  <tr>
    <td align="center" valign="top"><div align="center">
      <input type="checkbox" name="tick4" value="4" <?PHP //if ($format=='1' && $_POST['tick4']) { echo 'checked="checked"'; }?>/>
    </div></td>
    <td>Tick 4</td>
  </tr>
  
  <tr>
    <td valign="top"><div align="left"><span class="verdana_12_bold">Salary:</span></div></td>
    <td align="center" valign="top"><div align="left">
        <input type="radio" name="salary" value="paid" />
        Paid</div>      </td>
    <td align="center" valign="top"><div align="left">
      <input type="radio" name="salary" value="unpaid" />
    Unpaid</div></td>
  </tr>
  <tr valign="top">
    <td colspan="3"><hr align="left"/></td>
  </tr>
  
  
  
  
  
  
  
  
   <tr>
    <td valign="top"><div align="left"><span class="verdana_12_bold">Country:</span></div></td>
    <td align="center" valign="top"><div align="left">
    
      <select name="job_cats" style="width:165px" nChange="getjob_sub_cats('subCats.php?job_cats='+this.value)">
    <?PHP
    if ($format=='1' && $_POST['job_cats_title']) {
	echo '<option value="'.$_POST['job_cats_title'].'">'.$_POST['job_cats_title'].'</option>';
	'<option value="Select a Job Category">------</option>';
    } else {
	echo '<option value="Select a Job Category">Select a Job Category</option>';
    }
    ?>
    <?PHP

	$query1 = "SELECT * FROM job_cats";
	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);

	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);
	$job_cats_title1 = $row1['title'];
	$job_cats_id1 = $row1['id'];


echo '<option value="'.$job_cats_id1.'">'.$job_cats_title1.'</option>';

	echo $job_cats_id1;
}
    ?>
    </select>
     </div>      </td>
     
     
     
     
     
    <td align="center" valign="top"><div id="citydiv" align="left">
<select name="job_sub_cats" style="width:165px">
    <?PHP
    if ($format=='1' && $_POST['job_sub_cats']) {
	echo '<option value="'.$_POST['job_sub_cats'].'">'.$_POST['job_sub_cats'].'</option>';
	'<option value="Select a Job Sub category">------</option>';
    } else {
	echo '<option value="Select a Job sub category">Select a Job sub category</option>';
    }
    ?>
    <?PHP 

$job_cats=intval($_GET['job_cats']);

	$query1 = "SELECT * FROM job_sub_cats WHERE job_cats_id = $job_cats_id1";

	$result1 = mysql_query($query1) or die ("query 1 failed");
	$count1 = mysql_num_rows($result1);


	for ($i = 0; $i < $count1; $i++) {
	$row1 = mysql_fetch_array($result1);

	$sub_cats_id1 = $row1['id'];
	$sub_cats_title1 = $row1['subTitle'];
	$cats_id1 = $row1['job_cats_id'];

	echo '<option value="'.$sub_cats_id1.'">'.$cats_id1.'</option>';

	}
    ?>
    </select>
</div></td>
  </tr>
  <tr valign="top">
    <td colspan="3"><hr align="left"/></td>
  </tr>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <tr>
    <td colspan="3">
      <div align="left">
        <input type="submit" name="submit"  value="submit" />
      </div></td>
  </tr>
</table>
</form>
</body>
</html>

and this is whats in the database

CREATE TABLE `jobs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `datePosted` date NOT NULL,
  `cat_id` int(11) NOT NULL,
  `subCat_id` int(11) NOT NULL,
  `option1` varchar(255) NOT NULL,
  `option2` varchar(255) NOT NULL,
  `salary` varchar(255) NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;






CREATE TABLE `job_cats` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;






CREATE TABLE `job_sub_cats` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `job_cats_id` int(11) NOT NULL,
  `job_cats_title` varchar(255) NOT NULL,
  `subTitle` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ;

teynon · July 11, 2011

Ok, based on your code, you are not updating the sub categories. You are simply using the last job category id that was processed by mysql / php. You need to determine the selected one. Either using ajax or interpreting the page POST variables and assigning the ID based on what the user selected.

ricky spires · July 11, 2011

I tried loads of ajax but i couldn't get any of it to work

would you mind pointing me in the right direction.

thanks

rick

teynon · July 11, 2011

I'm actually working on a website for a customer that uses this same concept. I'll post the code, hopefully you can swim your way through it.

JAVASCRIPT / AJX

function getStoreLocations() {

var xmlHttp;

try {

	// Firefox, Opera 8.0+, Safari

	xmlHttp=new XMLHttpRequest();

}

catch (e) {

	// Internet Explorer  

	try {

		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

	}

	catch (e) {

		try {

			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

		}

		catch (e) {

			alert("Your browser does not support AJAX!");

			return false;

		}

	}

}



xmlHttp.onreadystatechange=function() {

	if(xmlHttp.readyState==4) {

		document.getElementById('store').innerHTML=xmlHttp.responseText;

	}

	else if (xmlHttp.readyState==2) {

		document.getElementById('store').innerHTML='Loading...';

	}

}

// Store ID to get.
var storeID = document.getElementById('mainStore').value;
xmlHttp.open("GET","include/getStoreLocations.php?store="+storeID,true);
closeCommand=0;
closeAjax();
xmlHttp.send(null);

}

getStoreLocations.php

<?php
$ajax=1;
$login_required=true;
$admin_required=true;
require_once "template.php";
if ((!isset($_GET['store']))||(!ctype_digit($_GET['store']))) {
	die();
}

echo "<select name=\"store_location\" class=\"storeLocations\" id=\"storeLocations\" multiple size=12><option value=\"0\" selected>All Locations</option>";
$sql="SELECT t2.ID, t2.ADDR1, t2.CITY, t2.STATE, t2.ZIP FROM store_locations as t1, address as t2 WHERE t1.SID = '{$_GET['store']}' AND t1.ID = t2.PID AND t2.TID = 3";
if ($query=@mysql_query($sql)) {
	while ($req=mysql_fetch_array($query)) {
		echo "<option value=\"{$req[0]}\">{$req[1]}, {$req[2]} {$req[3]}, {$req[4]}</option>";
	}
}
?>
</select><br /><a href="#" onClick="openAjax('addStoreLocation_ajax.php?id=<?php print $_GET['store'];?>', 'getStoreLocations();');">Add Store Location</a>
<?php
@mysql_close($id_link);
?>

Building the main category list

<?php
$ajax=1;
$login_required=true;
$admin_required=true;
require_once $_SERVER['DOCUMENT_ROOT']."cpbogo/include/template.php";
securePost();
$error=0;
$response="";

?>
<select name="store" onChange="getStoreLocations();" onKeyUp="getStoreLocations();" id="mainStore" class="storeSelectBox">
<option value="0">Select Store</option>
<?php echo buildOptions(getStores()); ?>
</select><br />
<a href="#" onClick="openAjax('addStore_ajax.php', 'refreshStoreList();clearStoreLocations();');">Add Store</a>
<?php
@mysql_close($id_link);
?>

in template.php I have



function getStores() {
	// Get all stores and ids
	$array=array();
	$sql="SELECT `BUS_NAME`, `ID` FROM store ORDER BY `BUS_NAME`";
	if ($query=@mysql_query($sql)) {
		if (mysql_num_rows($query) > 0) {
			while ($req=@mysql_fetch_array($query)) {
				$array[$req['ID']]=$req['BUS_NAME'];
			}
		}
	}
	return $array;
}
function buildOptions($array) {
	$output="";
	foreach ($array as $key=>$value) {
		$output.="<option value='{$key}'>{$value}</option>";
	}
	return $output;
}

And here is what the actual HTML looks like

<div id="storeMain" class="storeLocations">
<select name="store" onchange="getStoreLocations();" onkeyup="getStoreLocations();" id="mainStore" class="storeSelectBox">
<option value="0">Select Store</option>
<option value="1">Kmart</option>
<option value="2">Piggly Wiggly</option>
</select><br>
<a href="#" onclick="openAjax('addStore_ajax.php', 'refreshStoreList();clearStoreLocations();');">Add Store</a>
</div>
<div id="store" class="storeLocations"></div>

ricky spires · July 11, 2011

WOW...

Thankyou. i'll look over it and give it a go

cheers

rick

prash · March 17, 2012

I need a help.

I am making a upload page where i want to use three drop down as -

dropbox 1 -> dropbox 2 -> dropbox 3

I want to call the values from sql to all three dropdowns and also want to upload content based on choosen options. For example i want to upload a game of nokia mobile phone that’s model no is c200 then -

the device list (computer, mobile etc) list should come in dropdown 1 and device company name(Nokia, Samsung etc) should come in dropdown 2 and device model list(c200, c101 etc) should come in dropdown 3

then choose the file and hit upload.

please provide me this. your help will be heartfull for me as i am not able to make this...[] PLEASE HELP ME OUT

Sign In

category and sub category drop down form problem

Recommended Posts

ricky spires

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

ricky spires

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

ricky spires

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

ricky spires

Link to comment

Share on other sites

prash

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information