. I have two dynamic drop downs get the values from mysql db. In my html form I also put a submit button to call a php function. The problem is that when I click submit and load another php function(which is not present in the post - no need), dropdowns reset their values - the second dropdown hides and the first one resets. Does anybody know where may be the problem?Here is the code:
db:
- Code: Select all
CREATE TABLE IF NOT EXISTS `two_drops` (
`id` int(11) NOT NULL auto_increment,
`tier_one` varchar(255) NOT NULL,
`tier_two` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM ;
--
-- Dumping data for table `two_drops`
--
INSERT INTO `two_drops` (`id`, `tier_one`, `tier_two`) VALUES
(1, 'Colors', 'Red'),
(2, 'Colors', 'Blue'),
(3, 'Colors', 'Green'),
(4, 'Colors', 'Yellow'),
(5, 'Colors', 'Black'),
(6, 'Shapes', 'Square'),
(7, 'Shapes', 'Circle'),
(8, 'Shapes', 'Triangle'),
(9, 'Shapes', 'Rectangle'),
(10, 'Shapes', 'Oval');
db.php
- Code: Select all
<?php
mysql_connect("localhost", "db_username", "db_password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
?>
index.php:
- Code: Select all
<?php
include('db.php');
include('func.php');
?><!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>Chained Select Boxes using PHP, MySQL and jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<body>
<p>
<form action="" method="post">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Select a Category</option>
<?php getTierOne(); ?>
</select>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$tier_two = $_POST['tier_two'];
echo "You selected ";
echo $drop." & ".$tier_two;
}
?>
<p><a href="three-tier/">View 3 Tier Select Box Example</a></p>
</body>
</html>
func.php
- Code: Select all
<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT tier_one FROM two_drops")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo '<option value="'.$tier['tier_one'].'">'.$tier['tier_one'].'</option>';
}
}
//**************************************
// First selection results //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT * FROM two_drops WHERE tier_one='$drop_var'")
or die(mysql_error());
echo '<select name="tier_two" id="tier_two">
<option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['tier_two'].'">'.$drop_2['tier_two'].'</option>';
}
echo '</select> ';
echo '<input type="submit" name="submit" value="Submit" />';
}
?>
10X in advance
