help required with populating dropdowns based on previous dropdown selection.

Question

ebanbury 13 Junior Poster

13 Years Ago

Hi
I'm having real problems getting one dropdown to populate a second dropdown based on different options being selected in the first. For it to work in a form. And for the dropdowns to take their data from mysql table.

In the code enclosed I've hard-coded the categories, but obviously this means I can't match all the records required from the database and post them to the table in the same page, on 'submitting'of the form.

If anyone has any ideas on how I can change this to work from my mysql table and take the fields prop_type and prop_saletype I would be extremely grateful.

I'm not very clued up on either js or javascript though, hence my problem with this task.

Ideally I wanted a different search criteria to show results in a different table on each page of a spry tabbed table.

Many thanks in advance liz

<?php require_once('Connections/iwalletc_localhost.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$maxRows_rs_search = 10;
$pageNum_rs_search = 0;
if (isset($_GET['pageNum_rs_search'])) {
  $pageNum_rs_search = $_GET['pageNum_rs_search'];
}
$startRow_rs_search = $pageNum_rs_search * $maxRows_rs_search;


mysql_select_db($database_iwalletc_localhost, $iwalletc_localhost);
$query_rs_search = 
"SELECT property_details.prop_id, property_details.prop_type, property_details.prop_saletype, property_details.image_main 
FROM property_details 
WHERE property_details.prop_type = '$_POST[prop_type]'
AND property_details.prop_saletype = '$_POST[prop_saletype]'";

$rs_search = mysql_query($query_rs_search, $iwalletc_localhost) or die(mysql_error());
$row_rs_search = mysql_fetch_assoc($rs_search);
$totalRows_rs_search = mysql_num_rows($rs_search);

?>
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

/*
Triple Combo Script Credit
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var categories = [];
categories["startList"] = ["Apartments","Landed Property", "Hdb Flat", "Commercial", "Hudc Apartments"]
categories["Apartments"] = ["condominium","duplex","penthouse", "walk-up apartment", "townhouse-cluster", "masionette apartment"];
categories["Landed Property"] = ["bungalow","terrace","corner terrace", "semi-detached"];
categories["Hdb Flat"] = ["2-room flat","3-room flat","4-room flat","5-room flat", "jumbo hdb flat", "executive apartment", "executive maisonette"];
categories["Commercial"] = ["warehouse","office","hotel", "factory", "shopping centre", "land", "hawker stall", "table stand", "carpark"];
categories["Hudc Apartment"] = ["hi-rise", "low-rise", "masionette hudc apartment"];

var nLists = 2; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script> 
<style type="text/css">
@import url("css/proplist.css");
</style>
</head>

<body>
<form name="tripleplay" action="showhide_test2.php" method="post" >
<fieldset = "Property Search" >
<legend class="fieldset"><b>Property Search</b></legend>
<p>Property Type: 
  <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
   <option selected>Make a selection</option>
  </select>
  &nbsp;</p>
<p>Property Subtype: 
    <select name='List2' onchange="getValue(this.value, this.form['List2'].value, 
this.form['List2'].value)">
    <option selected >Make a selection</option>
</select>
</p>
<p>search:
  <input type="submit" name="search" id="search" value="Submit" />
</p>
</fieldset>
</form>
<table width="500" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><img src="toptable/table_propertylist_top.gif" alt="" width="500" height="19" /></td>
  </tr>
  <tr>
    <td align="center" background="toptable/table_propertylist_middle.gif"><div align="center">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="32%" align="center"><img src="<?php echo $row_rs_search ['image_main']; ?>" alt="main" class="propimagewrap" /></td>
          <td width="65%"><div class="propadd1"><?php echo $row_rs_search['prop_type']; ?>, <?php echo $row_rs_search['prop_saletype']; ?></div>
            <div class="propadd1">, </div>
            <div class="proparea"></div>
            <div class="propadd2"> bedroom,  bathroom</div>
            <div class="proplistprice"></div>
            <div class="readmore"><a href="propertylisting_details.php?recordID=<?php echo $row_rs_search['prop_id']; ?>">view details</a></div></td>
          <td width="3%"></td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td align="center"><img src="toptable/table_propertylist_bottom.gif" alt="" width="500" height="19" /></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>
<?php
mysql_free_result($rs_search);
?>

php

2 Contributors
2 Replies
104 Views
19 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by ebanbury

jkon 638 Posting Whiz in Training

13 Years Ago

There are many approached to that. As you stated that are not familiar to JavaScript and DOM (if you want to do with web you should consider learning the basics) the simplest way is populating possible drop down menus in display none divs and select witch one to show by onchange. This still has something to do with JavaScript and DOM but it is easier than clearing select options adding others and AJAX.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ebanbury 13 Junior Poster · Answer 1 · 2011-03-10T08:11:15+00:00

Hi Yes thanks. the onchange function is probably the neatest way to go.
Even more simply, if it were possible. If I had a spry tabbed table, with 2 tabs. Could I just repeat the search form and results table in each tab? I have tried it and it seems to work except the results just bounce back to the tab which is the default panel. Anyway I can make the results stay in the selected tab?

Many thanks for the help