ก่อนอื่นต้องขอชมท่าน Webmaster ก่อนนะครับ ว่าขยันตอบกระทู้มาก ๆ ผมไม่เคยเห็นเว็บมาสเตอร์ที่ไหนมาตอบกระทู้ทุกกระทู้เหมือนที่นี่เลยครับ แล้วตอบแบบไม่ทิ้งด้วย ถ้ายังทำไม่ได้ก็จะหาวิธีทำจนทำได้ ขอบอกว่าสุดยอดจริง ๆ เลยครับ ผมเข้ามาที่นี่เป็นวันแรกครับ ที่รู้จักก็เพราะเข้าไปในบอร์ด PHP ของ Thaidev.com ก็เห็นมีคนตอบกระทู้(คาดว่าเป็น Webmaster ที่นี่)แล้วมีลิงค์ของเว็บนี้อยู่ก็เลยลองเข้ามาดู ปรากฏว่ารู้สึกอบอุ่นยังไงไม่รู้ครับ เหมือนกับว่า Webmaster ดูแลทุกคนที่เข้ามาถามเป็นอย่างดีเลย ผมไม่ได้ยกยอ หรือ อะไรหรอกนะครับ อันนี้รู้สึกจากใจจริง ๆ ครับ
แต่วันนี้ก็มีปัญหาว่า ผมจะทำ Listbox แบบ 2-3 ชั้น คือ เอาง่าย ๆ นะครับ ถ้าเราเลืิอกจังหวัดใน Listbox แรก แล้ว Listbox ที่ 2 ก็จะมีเฉพาะชื่ออำเภอในจังหวัดนั้น แล้วพอเราเลือกอำเภอใน Listbox ที่ 2 แล้ว Listbox ที่ 3 ก็จะมีเฉพาะชื่อตำบลในอำเภอนั้นน่ะครับ ไม่ทราบว่าจะเขียนอย่างไรครับ ผมใช้ PHP ครับ
และจากการที่ผมไปค้นหามาก็เจอเหมือนกัน แต่ไม่เข้าใจเลยซักอันครับ เช่นลิงค์ด้านล่างที่ผมเอามาให้ดูครับลองทำตามแล้ว ไม่รู้เรื่องเลยครับ
อยากจะขอให้ Webmaster ช่วยแนะนำด้วยครับ
list menu 2 ชั้น โดยใช้ javascript กับ php เมื่อเลือกอำเภอ จะแสดงตำบลในอำเภอนั้น
http://forum.modoeye.com/module31-38.html
แล้วลองไปประยุกต์ดูครับ ไม่ได้อย่างไรลองถามดูอีกทีครับ
ปล. ทางทีมงานขอบคุณสำหรับคำชมครับ
ขอบคุณท่าน Webmaster มาก ๆ ครับ จะลองทำดูก่อนนะครับ ถ้ามีปัญหา ก็จะมาถามในกระทู้นี้ต่อครับ
มาแล้วครับ ปัญหาของผมคือผมสงสัยว่า PHP สามารถเขียนไว้ใน Tag Javascript ได้ด้วยหรอครับ ผมลองเขียนแบบนี้
<script language=javascript type=text/javascript >
alert("hello");
<?php
echo "This message from php";
?>
</script>
Javascript มันทำงานนะครับ ลองดูแล้วก็มีกล่อง Alert ขึ้นมา แต่ว่าคำสั่ง PHP ไม่ทำงานครับ หน้าเว็บเพจขาวสะอาดเลยครับ ซึ่งปกติมันจะต้องมีข้อความว่า This message from php ใช่ไหม่ครับ แต่นี่มันไม่มีเลยครับ ไม่ทราบว่าต้องเขียนอย่างไร หรือแก้ไขอย่างไรครับ
| ตารางฐานข้อมูลครับ | |||
| Subj_code | Subj_name |
Term |
Class |
| 0001 | ภาษาไทย |
1 |
it1 |
| 0002 | ภาษาอังกฤษ |
1 |
gp1 |
| 0003 | ภาษาจีน |
2 |
it1 |
Subj_code คือ รหัสวิชา Subj_name คือ ชื่อวิชา Term คือ ภาคเรียน Class คือ ห้องที่เรียนวิชานี้
คืออย่างนี้ครับขอเรียกว่าพี่แระกัน ผมต้องการเอาข้อมูลจาก MySQL มาสร้างเป็น Listbox คือ Listbox รายวิชาครับ โดยรายละเอียดมีดังนี้
Listbox แรก เป็นห้อง
<option value='it1'>ปวส.1 เทคโนฯ</option>
<option value='gp1'>ปวส.1 กราฟิกส์</option>
Listbox ที่ 2 เป็นภาคเรียน
<option value='1'>1</option>
<option value='2'>2</option>
Listbox ที่ 3 เป็นรายวิชา โดย Listbox นี้จะสัมพันธ์กับ Listbox ที่ 1 และ 2 ครับ เช่น ถ้าเราเลือก ปวส.1 เทคโนฯ และเลือกภาคเรียนที่ 2 Listbox รายวิชาก็จะแสดงเฉพาะวิชาที่ ปวส.1 เทคโนฯ ภาคเรียนที่ 2 ออกมาครับ พี่พอจะเข้าใจมั้ยครับ
คุณลองเอาโค๊ดตามที่ผมยกตัวอย่างไว้นั้นไปทดลองดูครับ แล้วลองเขียนเป็นค่าในแบบ static ที่คุณต้องการก่อนครับ ลองทำการทดลองพอได้ตามต้องการแล้ว ก็ค่อยเขียนให้เอาค่าเหล่านั้นออกมาจากฐานข้อมูล
php ไม่ว่าคุณจะสั่งให้มัน echo ตรงส่วนใด ก็จะมีตัวอักษรอยู่ในส่วนนั้นๆ
หลังจากที่คุณเขียนโค๊ดเป็น static ได้แล้วที่เหลือคุณเพียงเขียน php ให้มันได้ source code ที่เหมือนกับ code static ก่อนหน้าเท่านั้นครับ
ผมคงได้แต่แนะนำแบบนี้ครับเนื่องจากคุณต้องทำความเข้าใจ javascript ก่อน ส่วนตัวแดงนั้นเป็นสิ่งที่มักจะลืมทำให้หลงทางครับ
ขอบคุณมาก ๆ ครับพี่ แต่บอกตรง ๆ เลยว่าผมไม่ค่อยรู้เรื่อง Javascript เลยครับ ดู Code บางทีก็ไม่เข้าใจ แต่ยังไงก็จะลองทำตามดูครับ
Tue 30 Jan 2007 17:46:14
รบกวนเว็บมาสเตอร์ช่วย debug code ให้หน่อยครับ ถ้าคอมเม้นว่าอะไรมันคืออะไรด้วยก็ได้ครับ
<html>
<head><title></title>
<script type=text/javascript >
var arrItems = new Array();
var arrItemsGrp = new Array();
var arrItemValue = new Array();
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
var arrItemValue2 = new Array();
<?php
$host = "localhost";
$user = "root";
$pass = "123456";
$dbname ="test";
$sql11= "select * from tambon";
$con = mysql_connect($host,$user,$pass,"SET NAMES tis620") or die("can't connect host");
$db = mysql_db_query($dbname,"SET NAMES tis620") or die("cant' select data");
$result11=mysql_query($sql11,$con) or die("can't operate sql command");
$x=0;
while($row11=mysql_fetch_row($result11))
{
echo "x=".$x;
$aaa=$row11[2];
$tbn=$row11[1];
$tbi=$row11[0];
echo "a=".$aaa;
echo "b='".$tbn;
echo "c=".$tbi;
$x=$x+1;
?>
arrItems2[x]=b;
arrItemsGrp2[x]=a;
arrItemValue2[x]=c;
<?php
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
myEle = document.createElement("option") ;
myEle.value = " ";
myEle.text = " -- เลือกอำเภอ/เขต -- " ;
controlToPopulate.add(myEle) ;
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = arrItemValue[x];
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
controlToPopulate.focus();
}
function selectChange2(control2, controlToPopulate2, ItemArray2, GroupArray2)
{
var myEle ;
var x ;
for (var q=controlToPopulate2.options.length;q>=0;q--) controlToPopulate2.options[q]=null;
myEle = document.createElement("option") ;
myEle.value = " ";
myEle.text = " -- เลือกตำบล/แขวง -- " ;
controlToPopulate2.add(myEle) ;
for ( x = 0 ; x < ItemArray2.length ; x++ )
{
if ( GroupArray2[x] == control2.value )
{
myEle = document.createElement("option") ;
myEle.value = arrItemValue2[x];
myEle.text = ItemArray2[x] ;
controlToPopulate2.add(myEle) ;
}
}
controlToPopulate2.focus();
}
</script>
</head>
<body>
<!---เมื่อ ได้ javascript ที่เก็บข้อมูล จากdatabase ไว้ในตัวแปลของ javascript แล้ว ก็ ถึง เวลานำไปใช้ล่ะครับ
อันนี้เป็น เลือก อำเภอ --->
<form name='form1'>
<select name="home_amph" id="h_amph" size="1" style="width: 200px;" class="fieldselect" onchange='selectChange2(this,form1.home_tumbon, arrItems2, arrItemsGrp2);document.getElementById("h_amph").value=document.getElementById("h_amph").options[document.getElementById("h_amph").selectedIndex].text;'>
<?php
$host = "localhost";
$user = "root";
$pass = "123456";
$dbname ="test";
$con = mysql_connect($host,$user,$pass,"SET NAMES tis620") or die("can't connect host");
$db = mysql_db_query($dbname,"SET NAMES tis620") or die("cant' select data");
$sql1= "select * from ampid";
$result1=mysql_query($sql1,$con);
while($row1=mysql_fetch_row($result1)) {
echo"<option value=".$row1[0].">".$row1[1]."</option>";
}
?>
<!---เลือกกตำบล ในอำเภอนั้นๆ--->
<select name="home_tumbon" size="1" class="fieldselect" id="home_tumbon" style="width: 180px;" onChange='document.getElementById("h_tumbon").value=document.getElementById("home_tumbon").options[document.getElementById("home_tumbon").selectedIndex].text;'>
</select>
</form>
</body>
</html>
ผมไม่ทราบว่าคุณอ่านโค๊ดได้เข้าใจมากน้อยเท่าใด จึงไม่สามารถ comment ลงไปได้
หลักๆคือเขามี table ที่เก็บรายชื่อตำบล, อำเภอ, จังหวัด เขาก็ query ออกมาใส่ select input เท่านั้น เพียงแต่ทำในรูปแบบของ javascript คุณอาจจะงงว่ามันทำงานอย่างไร ผมถึงแนะนำว่าให้ลองอ่านตัวอย่างที่ผมลิงค์ให้ก่อน ให้เข้าใจการทำงานของ javascript เพื่อใช้ในการสร้าง dynamic content ครับ
อาจจะดูใจดำไปหน่อยที่ไม่บอกอะไรเลยให้ไปอ่านเอาเอง สิ่งที่ทีมงานต้องการในการเปิด forum แห่งนี้อาจจะไม่เหมือนที่อื่นๆคือ ผมให้ตัวอย่างเป็น guideline ให้ทำเข้าใจเพื่อเอาไป apply ไม่เช่นนั้นก็จะไม่สามารถแก้ปัญหาที่เกิดขึ้นคล้ายๆกันได้ครับ
ผมอยากให้คุณ copy code จากตัวอย่างไปทำการทดลอง เปลี่ยนโน่นเปลี่ยนนี่ดูครับ error อะไรก็มีโค๊ดต้นฉบับ เอาไปทดลองได้อีกเมื่อเข้าใจการทำงานแล้วคุณก็เขียน php ให้แสดงโค๊ด javascript ตามที่ต้องการได้ครับ อีกอย่างถ้าไม่มี Firefox แนะนำให้โหลดมาใช้ครับเนื่องจาก Firefox ช่วยได้เยอะในการ Debug Javascript และถ้าคุณต้องการเขียนเว็บไซท์เพื่อใช้งานจริง คุณก็ควรทำการทดลองในหลายๆ browser ครับ
คุณคงรู้อยู่แล้วว่า Javasctipt ทำงานในฝั่ง Client โดยการเขียน script ฝังมาในโค๊ด HTML
และ HTML เป็น Markup Language เป็น TEXT ที่มีโครงสร้างจำเพาะใช้ browser ในการ render
และ php ทำงานบนฝั่ง Server โดยการเขียนโค๊ดแสดงผลเป็น TEXT
ถ้าเข้าใจสิ่งเหล่านี้ก็จะเข้าใจว่าภาษาใดควรอยู่ตรงไหน ผมถึงบอกว่าลอง javascript ให้เข้าใจแล้วเขียน php ให้ได้โค๊ดตามต้องการครับ
การทำงานของ javascript นั้นอาจจะเข้าใจยากหน่อยเนื่องจาก browser จะไม่ทำการ render แต่ก็มีหลายวิธีในการ debug คล้ายๆกับที่ทำใน php ครับ เมื่อ browser ไม่ render บางคำสั่งในหน้าแสดงผล สิ่งที่คุณควรดูคือ source html ที่ browser ได้รับครับ
เช่น
<script language="javascript" type="text/javascript">
function getObj(id){ return document.all?document.all[id]:document.getElelmentById(id); }
function updateCombo(obj){ obj.combo2.options.length=0; switch(obj.combo1.value){ <? for($i=1; $i < 11; $i++){ echo "case "".$i."": "; for($j=0; $j < ($i + 10); $j++){ echo "obj.combo2.options[$j] = new Option('".$j."','".$j."');"; } echo "break;"; } ?> } }
</script>
<form>
<select name="combo1" onchange="updateCombo(this.form);"><? for($i=1; $i < 11; $i++){ echo "<option value="".$i."">".$i."</option>"; } ?></select>
<select name="combo2"></select>
</form>
ข้างบนนี้เป็นการสร้าง dynamic select input เช่นเดียวกัน php+javascript แต่เป็นการสร้างจากค่าที่ผมตั้งขึ้น loop สร้างขึ้นมา ลองทดลองอ่านโค๊ดที่มันส่งมายัง browser ดูครับ จากนั้นเปลี่ยน loop ต่างๆเป็น php+mysql เท่านั้เอง
Tue 30 Jan 2007 19:58:22
document.getElementById("h_tumbon").value=document.getElementById("home_tumbon").options[document.getElementById("home_tumbon").selectedIndex].text;'> ผมสงสัยว่าบรรทัดนี้หมายความว่าอย่างไรครับ แล้วก็การส่ง paramiter ไปให้ฟังก์ชั่นโดยใช้คำว่า this มันหมายความว่าอย่างไรครับ แล้วค่าที่ส่งไปให้มันมีรายละเอียดอะไรบ้างครับ
โค๊ดข้างบนจึงเป็นการ set ค่าให้กับ object ที่มี id "h_tumbon" เป็นค่าที่เลือกไว้ใน object ที่มี id "home_tumbon"
this เป็นคำสงวนในการเขียนโปรแกรม แบบ OOP ซึ่ง javascript ก็เป็น OOP ซึ่ง this ถูกใช้ใน object ใดๆหมายถึงตัวมันเองครับ
ไม่ทราบว่าได้ทดลอง run หรือยังครับ
Wed 31 Jan 2007 13:21:00
<html>
<head><title></title>
</head>
<script language="Javascript" type="text/javascript">
var subj_code = new Array();
var subj_name = new Array();
var teach_code = new Array();
var classs = new Array();
var x=0;
<?php
$host = "localhost"; $user = "root"; $pass = "123456"; $dbname ="student";
$sql_select= "select * from subject_it2";
$con = mysql_connect($host,$user,$pass,"SET NAMES tis620") or die("ไม่สามารถติดต่อโฮสต์ได้");
$db = mysql_db_query($dbname,"SET NAMES tis620") or die("ไม่สามารถเลือกฐานข้อมูลได้");
$result=mysql_query($sql_select,$con) or die("ไม่สามารถรันคำสั่ง SQL ได้");
$x=0;
while($data1=mysql_fetch_array($result))
{ //start while
echo "x=".$x.";";
$subj_code=$data1["subj_code"];
$subj_name=$data1["subj_name"];
$teach_code=$data1["teach_code"];
$classs=$data1["class"];
echo "subj_code_tmp=".$subj_code.";";
echo "subj_name_tmp=".$subj_name.";";
echo "teach_code_tmp=".$teach_code.";";
echo "class_tmp=".$classs.";";
$x=$x+1;
?>
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
<?php
} //end while
?>
function changeSelect2(obj)
{//start function
var select1=obj.form.select1.value;
var select2=obj.form.select2.value;
var theform = obj.form;
theform.select3.length = 0;
if((select1="pm")&&(select2="3"))
{
theform.select3.options[0] = new Option('เทคโนโลยี','1');
theform.select3.options[1] = new Option('ภาษาซี','2');
theform.select3.options[2] = new Option('ภาษาHTML','3');
theform.select3.disabled = false;
}
}//end function
</script>
<body>
<form name="f">
<select name="select1">
<option value="it">Option 1</option>
<option value="gp">Option 2</option>
<option value="pm">Option 3</option>
</select>
<select name="select2" onchange="changeSelect2(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select3" disabled></select>
</form>
</body>
</html>
<html>
<head><title></title>
</head>
<script language="Javascript">
var subj_code = new Array();
var subj_name = new Array();
var teach_code = new Array();
var classs = new Array();
x=0;
subj_code_tmp=3000-1101;
subj_name_tmp=ทักษะภาษาไทยเพื่ออาชีพ;
teach_code_tmp=J001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=1;
subj_code_tmp=3000-1201;
subj_name_tmp=ทักษะพัฒนาเพื่อภาษาอังกฤษ;
teach_code_tmp=S001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=2;
subj_code_tmp=3000-1301;
subj_name_tmp=ชีวิตและวัฒนธรรมไทย;
teach_code_tmp=K001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=3;
subj_code_tmp=3000-1601;
subj_name_tmp=ห้องสมุดกับการรู้สารสนเทศ;
teach_code_tmp=T001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=4;
subj_code_tmp=3901-1001;
subj_name_tmp=เทคโนโลยีสารสนเทศ;
teach_code_tmp=P001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=5;
subj_code_tmp=3901-1002;
subj_name_tmp=การโปรแกรมคอมพิวเตอร์;
teach_code_tmp=A001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=6;
subj_code_tmp=3901-1003;
subj_name_tmp=ระบบฐานข้อมูล;
teach_code_tmp=P001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=7;
subj_code_tmp=3901-2001;
subj_name_tmp=สถาปัตยกรรมคอมพิวเตอร์;
teach_code_tmp=P001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=8;
subj_code_tmp=3901-2005;
subj_name_tmp=การออกแบบและพัฒนาเว็บ;
teach_code_tmp=P001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=9;
subj_code_tmp=3901-2009;
subj_name_tmp=การโปรแกรมเว็บ 1 ;
teach_code_tmp=A001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
x=10;
subj_code_tmp=3901-2002;
subj_name_tmp=โครงสร้างข้อมูล;
teach_code_tmp=A001;
class_tmp=it;
subj_code[x]=subj_code_tmp;
subj_name[x] = subj_name_tmp;
teach_code[x] = teach_code_tmp;
classs[x] = class_tmp;
function changeSelect2(obj)
{
var select1=obj.form.select1.value;
var select3=obj.form.select3.value;
var theform = obj.form;
theform.select2.length = 0;
if((select1="pm")&&(select3="3"))
{
theform.select2.options[0] = new Option('เทคโนโลยี','1');
theform.select2.options[1] = new Option('2','ภาษาซี');
theform.select2.options[2] = new Option('3','ภาษาHTML');
theform.select2.disabled = false;
}
}
</script>
<body>
<form name="f">
<select name="select1">
<option value="it">Option 1</option>
<option value="gp">Option 2</option>
<option value="pm">Option 3</option>
</select>
<select name="select3" onchange="changeSelect2(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select2" disabled></select>
</form>
</body>
</html>
Thu 20 Dec 2007 13:25:44
ในโฟล์เดอร์มีเพลงชื่อ นกน้อย.mp3 นกใหญ่.mp3 ครับแล้วให้ชื่ือพวกนี้ไปชึ้นที่ listbox ครับ และถ้าเราเอาเพลงไปใสในโฟล์เดอร์นั้นอีกให้ไปโชว์ที่ใน listbox ด้วยครับ
ทำได้ไหมครับ
ขอบคุณครับ
Thu 20 Dec 2007 14:46:30
