|
|
|
รบกวนถามเรื่อง Dependent ListMenu หน่อยครับ ทำแล้วไม่เหมือนตัวอย่างครับ |
|
|
|
|
|
|
|
จากหัวข้อนี้ สร้าง Dependent ListMenu เลือกข้อมูลหลักและข้อมูลย่อยเปลี่ยนตามหัวข้อหลัก
ผมได้นำ code มาประยุกต์ใช้กับของผมครับ
ไอเดียก็คือ ต้องการให้ user เลือกลูกค้าจากรายชื่อทั้งหมด โดยจะมี 2 ListMenu อันแรกคือให้เลือกตัวอักษรตัวแรกของชื่อลูกค้า ซึ่งเรียงตั้งแต่ A-Z จากนั้นก็เลือกอันที่สอง ซึ่งจะเป็นรายชื่อลูกค้าที่มีชื่อขึ้นต้นด้วยตัวอักษรที่ user ได้เลือกไว้
ผมสร้างตารางมา 2 อัน
อันแรกชื่อ alphabet มี 2 field คือ alp_id (เรียงตั้งแต่1-26) และ alp (ไล่ตั้งแต่ A-Z)
อีกอันคือ customer_list มี 3 field คือ cus_id (เรียงเลข auto-increment), cus_name (ชื่อลูกค้า), และ alp_id (บอกว่าลูกค้าคนนี้ชื่อขึ้นต้นด้วยตัวอะไร)
ส่วนนี่คือ code ที่ผมไปดัดแปลงแล้วครับ
Code (PHP)
<?php
$objConnect = mysql_connect("localhost","root","1234") or die("Error Connect to Database");
$objDB = mysql_select_db("sbtm");
@mysql_query("SET NAMES tis620");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>SoftBank Telecom Thailand</title>
<script language = "JavaScript">
function ListCustomer(SelectValue)
{
form1.select2.length = 0
//*** Insert null Default Value ***//
var myOption = new Option('','')
form1.select2.options[form1.select2.length]= myOption
<?
$intRows = 0;
$strSQL = "SELECT * FROM `customer_list` ORDER BY cus_id ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
?>
x = <?=$intRows;?>;
mySubList = new Array();
strGroup = <?=$objResult["alp_id"];?>;
strValue = "<?=$objResult["cus_id"];?>";
strItem = "<?=$objResult["cus_name"];?>";
mySubList[x,0] = strItem;
mySubList[x,1] = strGroup;
mySubList[x,2] = strValue;
if (mySubList[x,1] == SelectValue){
var myOption = new Option(mySubList[x,0], mySubList[x,2])
form1.select2.options[form1.select2.length]= myOption
}
<?
}
?>
}
</script>
<style type="text/css">
<!--
.choosemenu {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: x-large;
text-align: center;
}
#database_storage {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.storage {
background-color: #666;
color: #FFF;
}
-->
</style>
<style type="text/css">
<!--
.lists {
font-size: 18px;
font-family: "Arial Black", Gadget, sans-serif;
}
.listtable {
background-color: #EFEFEF;
border: thick solid #E8E8E8;
}
.menutable {
border: medium solid #F00;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #C06;
}
a:active {
text-decoration: none;
color: #C06;
font-size: 12px;
}
.menu_menu {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
}
#xx {
font-size: 1px;
}
#xxx {
font-size: xx-small;
}
.dbattribute {
font-family: "Arial Black", Gadget, sans-serif;
font-weight: bolder;
background-color: #666;
color: #FFF;
border: thin none #000;
}
.listmysql {
font-family: Verdana, Geneva, sans-serif;
background-color: #EFEFEF;
border: thin solid #000;
font-size: 12px;
}
#cat_contact {
color: #FF0;
}
.please_select {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18px;
}
.Start_from {
color: #C06;
}
-->
</style>
</head>
<body>
<table width="80%" height="75" border="0" align="center">
<tr>
<td height="71"><a href="index.php"><img src="1000px-SoftBank_logo.svg.png" alt="" width="190" height="31" align="middle"/></a></td>
</tr>
</table>
<table width="80%" border="0" align="center" class="storage">
<tr>
<td height="43" id="database_storage"> Database Storage - <span id="cat_contact">IP VPN & Domestic Link</span></td>
</tr>
</table>
<p id="xx"> </p>
<table width="80%" border="1" align="center" cellspacing="0" class="listtable">
<tr>
<td width="33%" height="21" align="center"><a href="index.php" class="menu_menu">Back to main page</a><a href="CAT_contact.php" class="menu_menu"></a></td>
<td width="34%" align="center"><span class="menu_menu">Add more data</span></td>
<td width="33%" align="center"><span class="menu_menu">User account manage</span></td>
</tr>
</table>
<p> </p>
<form id="form1" name="form1" method="post" action="">
<table width="80%" border="0" align="center">
<tr>
<td width="50%" height="25%" align="right" class="please_select">Please select the customer to view the data</td>
<td width="10%" height="25%" align="center"> </td>
<td width="30%" align="left"> </td>
<td width="10%" align="left"> </td>
</tr>
<tr>
<td width="50%" height="25%" align="right" class="please_select"><span class="Start_from">Start with alphabet:</span></td>
<td width="10%" height="25%" align="center"> </td>
<td width="30%" align="left"><select name="select" id="select" onChange="ListCustomer(this.value)">
<option selected value=""></option>
<?
$strSQL = "SELECT * FROM alphabet ORDER BY alp_id ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
?>
<option value="<?=$objResult["alp_id"];?>"><?=$objResult["alphabet"];?></option>
<?
}
?>
</select></td>
<td width="10%" align="left"> </td>
</tr>
<tr>
<td width="50%" height="25%" align="right" class="please_select"><span class="Start_from">Customer name:</span></td>
<td width="10%" height="25%" align="center"> </td>
<td width="30%" align="left"><select name="select2" id="select2" style="width:60%"></select></td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
<?
mysql_close($objConnect);
?>
ปัญหาคือว่า พอรันแล้ว ทุกอย่างขึ้นมาตามปกติ ยกเว้นพอกดเลือกตัวอักษรแล้ว เมนูที่สองที่เป็นรายชื่อลูกค้ามันไม่ยอม update ตามครับ ยังเป็น Menu เปล่า โล่งๆเหมือนเดิม
ผมแก้เท่าไหร่ก็ยังหาจุดผิดไม่เจอ วานผู้เชี่ยวชาญช่วยดูให้หน่อยนะครับ ขอบคุณล่วงหน้าครับ
Tag : PHP, MySQL, HTML/CSS, JavaScript
|
|
|
|
|
|
Date :
2011-08-13 04:38:35 |
By :
thamesnakub |
View :
1106 |
Reply :
10 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (JavaScript)
strGroup = "<?=$objResult["alp_id"];?>";
ถ้ายังไม่ได้ลอง view source ในหน้า IE แล้ว copy html Tag ออกมาดูครับ เดียวจะช่วยดูให้ครับ
|
|
|
|
|
Date :
2011-08-13 08:38:14 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
คุณ Mr.Win ครับ
ผมลอง view source เหน code มันไม่เหมือนกับที่ผมเขียนมา เลยลองเอาไปแปะใน dreamweaver ดู ปรากฏว่ามันขึ้น error ที่ตัวข้อมูลในฐานข้อมูลซะเอง - -" เลยแก้แล้ว importข้อมูลใหม่ คราวนี้ได้แล้วครับ ขึ้นเมนูเรียบร้อย
ขอบคุณสำหรับคำแนะนำมากครับ 555
อีกนิดนึงนะครับ
ถ้าผมต้องการรับค่าจากที่ user เลือกในเมนู แล้วส่งให้ php ไปquery มาแสดงผลต่อเนี่ย (หรือก็คือส่งค่าจาก Javascript ไป php อะครับ) ต้องทำยังไงบ้างเหรอครับ ช่วยหน่อยนะครับ ไม่ค่อยมีความรู้เรื่อง Javascript เท่าไหร่
|
ประวัติการแก้ไข 2011-08-13 19:14:41
|
|
|
|
Date :
2011-08-13 15:34:01 |
By :
thamesnakub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ครับ
|
|
|
|
|
Date :
2011-08-13 20:07:13 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณมากคร้าบ
|
|
|
|
|
Date :
2011-08-13 20:48:15 |
By :
thamesnakub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
มีปัญหาอีกแล้วครับ - -"
ผมสร้างมาอีกตารางคือ customer_description ซึ่งมี field cus_id (ที่สัมพันธ์กับตารางก่อน) และ filed อื่นๆ ที่เกี่ยวข้องกับ customer แต่ละคน
แล้วก็ทำให้มันรับค่าที่ user เลือกมาแล้วไป query จาก database มาแสดงในหน้าเว็บ
แต่ปรากฏว่ามันขึ้น error ที่ function mysql_fetch_array ซึ่งผมก็ใช้ function นี้กับหน้าเว็ปก่อนๆมาแล้วก็ไม่เห็นจะมีปัญหาอะไร
ช่วยดู code ให้หน่อยนะครับ ว่ามีผิดพลาดตรงไหนบ้าง แล้วต้องแก้ยังไงดี ขอบคุณครับ
Code (PHP)
<?php
$objConnect = mysql_connect("localhost","root","1234") or die("Error Connect to Database");
$objDB = mysql_select_db("sbtm");
@mysql_query("SET NAMES tis620");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>SoftBank Telecom Thailand</title>
<script language = "JavaScript">
function ListCustomer(SelectValue)
{
form1.select2.length = 0
//*** Insert null Default Value ***//
var myOption = new Option('','')
form1.select2.options[form1.select2.length]= myOption
<?
$intRows = 0;
$strSQL = "SELECT * FROM `customer_list` ORDER BY cus_id ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
?>
x = <?=$intRows;?>;
mySubList = new Array();
strGroup = "<?=$objResult["alp_id"];?>";
strValue = "<?=$objResult["cus_id"];?>";
strItem = "<?=$objResult["cus_name"];?>";
mySubList[x,0] = strItem;
mySubList[x,1] = strGroup;
mySubList[x,2] = strValue;
if (mySubList[x,1] == SelectValue){
var myOption = new Option(mySubList[x,0], mySubList[x,2])
form1.select2.options[form1.select2.length]= myOption
}
<?
}
?>
}
</script>
<script language="javascript">
function checkform()
{
if(document.form1.select1.value == "")
{
alert('Please select the customer');
document.form1.select1.focus();
return false;
}
if(document.form1.select2.value == "")
{
alert('Please select the customer');
document.form1.select2.focus();
return false;
}
}
</script>
<style type="text/css">
<!--
.choosemenu {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: x-large;
text-align: center;
}
#database_storage {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.storage {
background-color: #666;
color: #FFF;
}
-->
</style>
<style type="text/css">
<!--
.lists {
font-size: 18px;
font-family: "Arial Black", Gadget, sans-serif;
}
.listtable {
background-color: #EFEFEF;
border: thick solid #E8E8E8;
}
.form_select {
background-color: #FFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
}
.menutable {
border: medium solid #F00;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #C06;
}
a:active {
text-decoration: none;
color: #C06;
font-size: 12px;
}
.menu_menu {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
}
#xx {
font-size: 1px;
}
#xxx {
font-size: xx-small;
}
.dbattribute {
font-family: "Arial Black", Gadget, sans-serif;
font-weight: bolder;
background-color: #666;
color: #FFF;
border: thin none #000;
}
.listmysql {
font-family: Verdana, Geneva, sans-serif;
background-color: #EFEFEF;
border: thin solid #000;
font-size: 12px;
}
#cat_contact {
color: #FF0;
}
.please_select {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 16px;
}
.dbattribute_customer {
font-family: "Arial Black", Gadget, sans-serif;
font-weight: normal;
background-color: #666;
color: #FFF;
border: thin none #000;
font-size: 14px;
}
.Start_from {
color: #C06;
font-size: 16px;
}
-->
</style>
</head>
<body>
<table width="80%" height="75" border="0" align="center">
<tr>
<td height="71"><a href="index.php"><img src="1000px-SoftBank_logo.svg.png" alt="" width="190" height="31" align="middle"/></a></td>
</tr>
</table>
<table width="80%" border="0" align="center" class="storage">
<tr>
<td height="43" id="database_storage"> Database Storage - <span id="cat_contact">IP VPN & Domestic Link</span></td>
</tr>
</table>
<p id="xx"> </p>
<table width="80%" border="1" align="center" cellspacing="0" class="listtable">
<tr>
<td width="33%" height="21" align="center"><a href="index.php" class="menu_menu">Back to main page</a><a href="CAT_contact.php" class="menu_menu"></a></td>
<td width="34%" align="center"><span class="menu_menu">Add more data</span></td>
<td width="33%" align="center"><span class="menu_menu">User account manage</span></td>
</tr>
</table>
<p> </p>
<form id="form1" name="form1" method="post" action="" onSubmit="JavaScript:return checkform();">
<table width="80%" border="0" align="center" class="form_select">
<tr>
<td width="18%" height="25%" align="right" class="please_select">Please select the customer </td>
<td width="2%" height="25%" align="center"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr>
<td width="18%" height="25%" align="right" class="please_select"><span class="Start_from">Start with alphabet:</span></td>
<td width="2%" height="25%" align="center"> </td>
<td width="30%" align="left"><select name="select1" id="select1" style="width:10%" onChange="ListCustomer(this.value)" >
<option selected value=""></option>
<?
$strSQL = "SELECT * FROM alphabet ORDER BY alp_id ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
?>
<option value="<?=$objResult["alp_id"];?>">
<?=$objResult["alp"];?>
</option>
<?
}
?>
</select></td>
<td width="10%" rowspan="2" align="left" valign="middle"><label>
<input type="submit" name="button" id="button" value="Submit">
</label></td>
</tr>
<tr>
<td width="18%" height="25%" align="right" class="please_select"><span class="Start_from">Customer name:</span></td>
<td width="2%" height="25%" align="center"> </td>
<td width="30%" align="left"><select name="select2" id="select2" style="width:80%">
</select></td>
</tr>
</table>
</form>
<p>
<table width="95%" height="35" border="0" align="center" cellpadding="5" cellspacing="5">
<tr class="dbattribute_customer">
<td width="2%" height="36" align="center" valign="middle" class="dbattribute_customer">No</td>
<td width="13%" align="center" valign="middle" class="dbattribute_customer">Site</td>
<td width="15%" align="center" valign="middle" class="dbattribute_customer">ID No.</td>
<td width="8%" align="center" valign="middle" class="dbattribute_customer">Type of Media</td>
<td width="7%" align="center" valign="middle" class="dbattribute_customer">Speed</td>
<td width="20%" align="center" valign="middle" class="dbattribute_customer">Interface</td>
<td width="8%" align="center" valign="middle" class="dbattribute_customer">Name of ISP</td>
<td width="7%" align="center" valign="middle" class="dbattribute_customer">Usage</td>
<td width="10%" align="center" valign="middle" class="dbattribute_customer">Telephone</td>
<td width="10%" align="center" valign="middle" class="dbattribute_customer">Remote/Telnet</td>
</tr>
<?php
include("config.php");
$cus_id = $_POST['select2'];
$result= mysql_query("SELECT * FROM `customer_description` where cus_id=$cus_id");
$i = 1;
while($dbarr = mysql_fetch_array($result)) {
?>
<tr align="left" class="listmysql">
<td width="2%" height="23" align="center" valign="middle"><?php echo $i ; ?> </td>
<td width="10%" valign="middle"><?php echo nl2br($dbarr['site'] ); ?> </td>
<td width="15%" align="center" valign="top"><?php echo nl2br($dbarr['id_no']) ; ?> </td>
<td width="8%" align="center" valign="top"><?php echo nl2br($dbarr['type_of_media']) ; ?> </td>
<td width="7%" align="center" valign="top"><?php echo nl2br($dbarr['speed']) ; ?> </td>
<td width="20%" align="left" valign="top"><?php echo nl2br($dbarr['interface']) ; ?> </td>
<td width="8%" align="center" valign="top"><?php echo nl2br($dbarr['name_ISP']) ; ?> </td>
<td width="7%" align="center" valign="top"><?php echo nl2br($dbarr['usage']) ; ?> </td>
<td width="10%" align="left" valign="top"><?php echo nl2br($dbarr['telephone']) ; ?> </td>
<td width="10%" align="left" valign="top"><?php echo nl2br($dbarr['remote_telnet']) ; ?> </td>
</tr>
<?php
$i++;
}
?>
</table>
</p>
<p> </p>
</body>
</html>
ส่วนนี่คือ error ครับ
|
ประวัติการแก้ไข 2011-08-15 15:55:17
|
|
|
|
Date :
2011-08-15 15:52:55 |
By :
thamesnakub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$result= mysql_query("SELECT * FROM `customer_description` where cus_id=$cus_id");
เอาเครื่องหมายแปลกๆออกก่อนครับ และตรง where ถ้ามันมีค่าเป็นตัวเลข ก็คลุมด้วย single quote ด้วยครับ
Code (PHP)
$result= mysql_query("SELECT * FROM customer_description where cus_id='$cus_id'");
|
|
|
|
|
Date :
2011-08-15 16:01:40 |
By :
Dragons_first |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ได้แล้วครับ !! ขอบคุณมากครับ
ที่แท้ก็ผิดแค่นี้เอง Y____Y
แต่หน้าก่อนๆ ผมใช้เครื่องหมายนี้ก็ยังไม่เห็นขึ้น error เลย ทำไมมันมาเป็นเอาหน้านี้ ...
|
|
|
|
|
Date :
2011-08-15 17:20:53 |
By :
thamesnakub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 05
|