Re: chained select with ajax
| From: | Chris Stinemetz | Date: | Sat, 13 Aug 2011 22:57:01 +0000 |
| Subject: | Re: chained select with ajax | ||
| References: | 1 2 | Groups: | php.general |
| Request: | Send a blank email to php-general+get-314516@lists.php.net to get a copy of this message | ||
>
> That show fix most of your problems and get you headed down the rod to
> recovery...
>
Thanks Jim for you help. Sorry for the delayed response. I think I am
getting closer but the third select is still not being populated.
Below is my updated code. I think it maybe the last query, but I am
not sure how to dump a query that is inside a class from the
select.php page that calls it with javascript. Any ides?
Below is updated code.
Thanks,
Chris
form page...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#store").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("select#type").change(function(){
$("select#store").html("<option>please wait...</option>");
var m_id = $("select#market option:selected").attr('value');
var t_id = $("select#type option:selected").attr('value');
$.post("select_store.php", {market_id:m_id,type_id:t_id}, function(data){
$("select#store").removeAttr("disabled");
$("select#store").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
var store = $("select#store option:selected").attr('value');
if(cat>0 && type>0)
{
var result = $("select#type option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<h1>15 Minute PCMD KPI</h1>
<h2>Select the first option in select</h2>
<h3>In the second select the potions will appear on the choice</h3>
<?php include "select.class.php"; ?>
<form id="select_form">
Market:<br />
<select id="category">
<?php echo $opt->ShowCategory(); ?>
</select>
<br /><br />
Store type:<br />
<select id="type">
<option value="0">choose...</option>
</select>
<br /><br />
Store name:<br />
<select id="store">
<option value="0">choose...</option>
</select>
<br /><br />
<input type="submit" value="confirm" />
</form>
<div id="result"></div>
</div>
</body>
</html>
class page...
<?php
class SelectList
{
protected $conn;
public function __construct()
{
$this->DbConnect();
}
protected function DbConnect()
{
include "db_config.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable
to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
public function ShowCategory()
{
$sql = "SELECT * FROM markets";
$res = mysql_query($sql,$this->conn);
$category = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$category .= '<option value="' . $row['mar_id'] .
'">' .
$row['mar_name'] . '</option>';
}
return $category;
}
public function ShowType()
{
$sql = "SELECT * FROM store_type WHERE id_market=$_POST[id]";
$res = mysql_query($sql,$this->conn);
$type = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$type .= '<option value="' . $row['id_market'] .
'">' .
$row['store_type'] . '</option>';
}
return $type;
}
public function ShowStore()
{
$sql = "SELECT * FROM store_list WHERE id_market=$_POST[market_id]
AND store_type=$_POST[type_id]";
$res = mysql_query($sql,$this->conn);
$store = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$store .= '<option value="' . $row['id_market'] .
'">' .
$row['store_name'] . '</option>';
}
return $store;
}
}
$opt = new SelectList();
?>