Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,747 members, 7,817,061 topics. Date: Saturday, 04 May 2024 at 02:19 AM

Populate 3 Drop Down Menu Using 3 Different Tables - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Populate 3 Drop Down Menu Using 3 Different Tables (1020 Views)

Create A Dropdown Menu Using Reactjs / Simple Drop Down Menu With Jquery And CSS / Facebook Style Drop Down Menu Design Using CSS (2) (3) (4)

(1) (Reply) (Go Down)

Populate 3 Drop Down Menu Using 3 Different Tables by uvalued(m): 12:14am On Jul 30, 2016
Greetings. I am designing a simple page which should have three drop down menu which should be populated from the database after each selection of option... I searched and found the following

https://www.nairaland.com/2852008/everyday-php-programming-challenge-solved#41811565

https://www.nairaland.com/2837905/javascript-jquery-html-5-css#41766960

https://www.nairaland.com/975932/need-php-code#11247872

but the solution was targeted at either one or two drop down menu.... below is the code u have put together (am using deprecated mysql but will convert it to pdo after i grasp it).

<html>
<head>
<script type='text/javascript' src='staff.js'> </script>
<script type='text/javascript' src='staffs.js'> </script>

</head>
<body>

<form name="aschform11" action="" method="post">
<strong><font size="3">Select Rank of Staff</font></strong>

1. -----Drop down menu Contains rank of staff which is first clicked
<table id='staff'>
<tr>
<td width="550">Staff</td>
<td width="30">

<select name="country" onChange="getlevel(this.value)">
<option value="">Select Staff</option>
<option value="1">Lecturer</option>
<option value="2">Asst. Lecturer</option>-
<option value="3">Cleaner</option>
<option value="4">Mechanic</option>
<option value="5">Driver</option>
</select>

</td>
</tr>

figure 2. -----Drop down menu Contains levels which is populated SUCCESSFULLY after figure 1 (rank of staff is clicked)

<tr style="">
<td>Level</td>
<td >
<div id="leveldiv">

<select name="level" onChange="getcode(this.value)">
<option>Select Level</option>
</select>
</div>
</td>
</tr>

Figure 3. -----Drop down menu should be populated with course codes after level is selected
<tr style="">
<td>course_code</td>
<td >

<div id="code_divs"><select name="course_codes" >
<option>Select Course Code</option>
</select></div></td>
</tr>

</table>
</form>

Using the following AJAX codes, works well to populate level drop down menu after staff drop down is selected


function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"wink;
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"wink;
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getState(levelId) {

var strURL="findlevel.php?level="+levelId;
alert(strURL);
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}



Here is level.php,

<?php $level=intval($_GET['level']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('compt');
$query="SELECT id,levelname FROM leveltable";
$result=mysql_query($query);
echo "<select name='state'>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['id'] . "'>" . $row['levelname'] . "</option>";
}
echo "</select>";
?>

RESULT:
After selecting Staff rank in figure 1, It display the following level correctly from table level in levels Drop down menu
100 LEVEL
200 LEVEL
300 LEVEL
400 LEVEL

Which is okay. My problem is that i modified the AJAX and Php codes above so that i can populate the course code drop down menu after selecting the level drop down menu like so

After selecting 100 level in figure 2 , wants course codes, in table
course_code, to populate the drop down menu 3
com111
com112
com113
etc-->

nothing shows like the image below.

Thanks for your suggestion

Re: Populate 3 Drop Down Menu Using 3 Different Tables by uvalued(m): 6:45am On Jul 30, 2016
hello still expecting your support
Re: Populate 3 Drop Down Menu Using 3 Different Tables by Codenister: 8:03am On Jul 30, 2016
Turn on the developer tools in your browser (by pressing CTR + shift + I) and see what happens when you click the level item.
Probably there's an error in your php code
Re: Populate 3 Drop Down Menu Using 3 Different Tables by bb6xt(m): 8:12am On Jul 30, 2016
@OP JQuery is your friend! Don't fight it, embrace it.
Re: Populate 3 Drop Down Menu Using 3 Different Tables by guru01(m): 10:08am On Jul 30, 2016
Your error might be from your php code which is not available.
Use a JavaScript debugger which might be your console, then console.log the response coming from server.
Re: Populate 3 Drop Down Menu Using 3 Different Tables by uvalued(m): 6:05am On Jul 31, 2016
thanks guys your suggestion was verry helpful
Re: Populate 3 Drop Down Menu Using 3 Different Tables by guru01(m): 6:54am On Jul 31, 2016
uvalued:
thanks guys your suggestion was verry helpful
Am glad it helped you.

(1) (Reply)

Looking For Both Masters And Newbies In Programming And Is Willing To Work / Entertainment Bloggers! Who Wants This Free Media Importer Wordpress Plugin? / This Is Only For Students With The Ability To Code.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 18
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.