drop downs

DarkPrince2005 · August 5, 2008

I am trying to generate a drop down box with values fetched from the category field in a mysql database using a distinct query, but i want to at the same time when a value is selected in the one box generate another drop down from the manufacturer field in the database where the category field of that manufacturer is the same as the first drop down box.

Does anyone have an example script or know of a way that i can achieve this?

DarkWater · August 5, 2008

If you want it to do that automatically (no page refresh), you'll need to use Ajax.

revraz · August 5, 2008

or Javascript

DarkWater · August 5, 2008

Ajax is the use of a certain Javascript object, so he has to use Javascript, yes.... (And before someone says it, I know that some other technologies are capable of Ajax requests through similar objects).

DeanWhitehouse · August 5, 2008

have a look at innerHTML that should do it

blueman378 · August 5, 2008

are you still looking for this i have it set up exactly as you wish, jsut need to change your queries in it and your good to go

DarkPrince2005 · August 5, 2008

Yes please, i've played around with my code and ajax, but i can only get it to work half way.

Product_list1.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("pc_lan_it");

  $sql = mysql_query("SELECT distinct(category_id) from tbl_product"); 
?>

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var category = document.getElementById('category').value;
var queryString = "?category="+category;
ajaxRequest.open("GET", "prod_man.php" + queryString, true);
ajaxRequest.send(null); 
}



										function ajaxFunc(){
											var ajaxRequest;  // The variable that makes Ajax possible!

											try{
												// Opera 8.0+, Firefox, Safari
												ajaxRequest = new XMLHttpRequest();
											} catch (e){
												// Internet Explorer Browsers
												try{
													ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
												} catch (e) {
													try{
														ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
													} catch (e){
														// Something went wrong
														alert("Your browser broke!");
														return false;
													}
												}
											}
											// Create a function that will receive data sent from the server
											ajaxRequest.onreadystatechange = function(){
												if(ajaxRequest.readyState == 4){
													var ajaxDisplay = document.getElementById('ajaxDiv2');
													ajaxDisplay.innerHTML = ajaxRequest.responseText;
												}
											}
											var manufacturer = document.getElementById('manufacturer').value;
											var queryString = "?manufacturer="+manufacturer;
											ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
											ajaxRequest.send(null); 
										}
</script>



<form name='myForm'>
<table>
<tr>
<td valign="top"><b>Category</b></td><td><div><select id='category' onchange='ajaxFunction()'><option>Select</option>
<?php
while ($row=mysql_fetch_array($sql)){
echo "<option value='$row[category_id]'>$row[category_id]</option>";
}    
?>
</select></div>
</td>
<td valign="top"><b>Manufacturer</b></td><td><div id='ajaxDiv'></div></td>
</tr>
</table><br><div id='ajaxDiv2'></div></form>
</body>
</html>

prod_man.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "pc_lan_it";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String

$category = $_GET['category'];

// Escape User Input to help prevent SQL Injection

$category1 = mysql_real_escape_string($category);

//build query
$query = mysql_query("SELECT distinct(product_manufacturer) FROM tbl_product WHERE category_id like '$category'");
//Execute query
//$qry_result = mysql_query($query) or die(mysql_error());

echo "<select id='manufacturer' onchange=\"ajaxFunc\">";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($query)){
echo "<option value='$row[product_manufacturer]'>$row[product_manufacturer]</option>";

}
echo "</select>";
?>

ajax-example.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "pc_lan_it";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String

$manufacturer = $_GET['manufacturer'];

// Escape User Input to help prevent SQL Injection

$manufacturer1 = mysql_real_escape_string($manufacturer);

//build query
$query = mysql_query("SELECT * FROM tbl_product WHERE product_manufacturer like '$manufacturer'");
//Execute query
//$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
echo "<table><tr><th>Name</th><th>Age</th><th>Sex</th><th>WPM</th></tr>";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($query)){
echo "<tr><td>$row[product_name]</td><td></td><td></td><td></td></tr>";

}
echo "</table>";
?>

DarkPrince2005 · August 5, 2008

Anyone? It's driving me crazy, as i've tried everything I can think of

DarkPrince2005 · August 7, 2008

Ok, firstly I'd like to thank blueman378 for the help and scripts. I got the scripts 75% working how I want them. But can anyone help me in what or how the response.php script should look like if I wanted to generate the 'body' using both values selected in the drop down boxes.

Index.php

<?     
ini_set('display_errors','On');
error_reporting(E_ALL);

     echo "<form name=\"newprod\" enctype=\"multipart/form-data\" method=\"post\" action=\"?method=prodman&submethod=create\">\n";
     echo "<strong>Category: </strong><font id='main'><select>\n";
     echo "</select></font>\n";
     
     echo "<strong>Manufacturer: </strong><font id='sub'><select>\n";
     echo "</select></font><br><br><div id='body'></div>\n";
?>

<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //retuen value
               } 
          }
     };
     req.open("GET", "response.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //send value
}

window.onLoad=dochange('main', 1);         // value in first dropdown
</script>

response.php

<?
ini_set('display_errors','On');
error_reporting(E_ALL);

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "pc_lan_it";
    //Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
    //Select Database
mysql_select_db($dbname) or die(mysql_error());

    // Retrieve data from Query String
     $data=$_GET['data'];
     $val=$_GET['val'];
     
     if ($data=='main') {  // first dropdown
          echo "<select name='main' onChange=\"dochange('sub', this.value)\"><option>Select</option>\n";
          $result=mysql_query("SELECT distinct(category_id) FROM tbl_product");
          while(list($category_id)=mysql_fetch_array($result)){
               echo "<option value=\"$category_id\" >$category_id</option> \n" ;
          }
	  echo "</select>\n";
     } else if ($data=='sub') { // second dropdown
          echo "<select name='sub' onChange=\"dochange('body', this.value)\">\n";
        $result=mysql_query("SELECT distinct(product_manufacturer) FROM tbl_product WHERE category_id like '$val'" );
          while(list($product_manufacturer)=mysql_fetch_array($result)){       
               echo "<option value=\"$product_manufacturer\" >$product_manufacturer</option> \n";
          }
	  echo "</select>\n";  
     } else if ($data=='body') { // second dropdown
          echo "<div name='body' id='body'>\n";
        $result=mysql_query("SELECT product_name FROM tbl_product WHERE product_manufacturer like '$val'" );
          while($row=mysql_fetch_array($result)){       
               echo "$row[product_name]<br> \n";
          }
	  echo "</div>\n";  
     } 
       
?>

DarkPrince2005 · August 8, 2008

Does anyone have a sollution?

Andy-H · August 8, 2008

This is how mine worked when I used it...

<?php

require("db.php");

$loginValidation = mysql_real_escape_string($_GET["loginname"]);
$loginNameValidation = md5($loginValidation);

if ( !empty($loginValidation) ){

$q_s = "SELECT id FROM accounts WHERE loginname = '$loginNameValidation' LIMIT 1";
$q_r = mysql_query($q_s)or die(sqlErr(__LINE__,__FILE__,mysql_error()));
$n_r = mysql_numrows($q_r);

if ( !ctype_alnum($loginValidation) ){
echo '<font color="red"><strong>Invalid - (alpha-numeric characters only)</strong></font>';
}elseif ( strlen($loginValidation) < 3 || strlen($loginValidation) > 20 ){
echo '<font color="red"><strong>Invalid - (character limit of 3-20)</strong></font>';
}elseif ($n_r == 1){
echo '<font color="red"><strong>Invalid - (Login-name in use)</strong></font>';
}else{
echo '<font color="green"><strong>Valid login-name</strong></font>';
}

}
?>

<tr>
<td align="center" width="200">Login-name:</td>
<td align="center" width="200">
<input type="text" name="loginname" id="loginname" size="25" maxlength="20"  class='input'  
onKeyUp="javascript: AjaxRequest('Login-name','AJAX/registerchk.php?loginname=','this.value')" /></td>
<td align="center" width="200" valign="top">
<span id="Login-name">Loading...</span>
</td>
</tr>

toivo · August 8, 2008

In a similar situation I cut corners and used jQuery from jquery.com with a handy plugin to manipulate Select lists from http://www.texotela.co.uk/code/jquery/select/

DarkPrince2005 · August 8, 2008

I don't really want to cut corners, and the jQuery is confusing to me.

DarkPrince2005 · August 10, 2008

anyone?

DeanWhitehouse · August 11, 2008

Can you stop bumping this thread, while waiting for a reply please look on google and/or try and work it out yourself.

Sign In

drop downs

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information