Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > listbox 2 ชั้นแบบ Ajax อยากให้กดปุ่ม แล้วดึงข้อมูลมาแสดงอะครับ

listbox 2 ชั้นแบบ Ajax อยากให้กดปุ่ม แล้วดึงข้อมูลมาแสดงอะครับ

เริ่มหัวข้อใหม่

Sacrifice

โพสกระทู้ ( 17 )
บทความ ( 0 )

Code (PHP)

<?php
    
    //ข้อมูลเกี่ยวกับฐานข้อมูลที่ใช้
   $DBServer = "localhost";
    $DBName = "My_Database";
    $DBUsername = "root";
    $DBPassword = "";
	
    $conn=mysql_connect( $DBServer, $DBUsername, $DBPassword ) or die( "ไม่สามารถติดต่อ
      กับ MySQLได้");
    mysql_select_db( $DBName ) or die( "ไม่สามารถเลือกใช้ฐานข้อมูล $dbname ได้" ); 

	@mysql_query("SET NAMES UTF8");
    $sql_select="select * from products where ProductType='$Tid' ";
    $result1= mysql_query( $sql_select, $conn );
   
     //เริ่มวนรอบแสดงข้อมูล
    while ($result = mysql_fetch_array($result1))

    //แสดงค่าในฐานข้อมูล
    {
		 
	echo"$result[ProductName],";
	
   }

       // ปิดการเชื่อมต่อ
 	mysql_close();
?>

html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ตัวอย่างการประยุกต์ใช้ AJAX กับ Double List Boxes</title>
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function refreshproductList() {
var productType = document.getElementById("productType").value;
if(productType == "" ) {
clearproductList();
return;
}
var url = "DoubListBoxesData.php? Tid=" + productType;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
updateproductList();
}
}
}

function updateproductList() {
clearproductList();
var productName = document.getElementById("productName");
var results = xmlHttp.responseText;
var option = null;
p=results.split(",");
for (var i = 0; i < p.length; i++){
option = document.createElement("option");
option.appendChild(document.createTextNode(p[i]));
productName.appendChild(option);
}
}

function clearproductList() {
var productName = document.getElementById("productName");
while(productName.childNodes.length > 0) {
productName.removeChild(productName.childNodes[0]);
}
}
</script>
</head>
<body>
<p style="font-weight:bold;">ตัวอย่างการประยุกต์ใช้ AJAX กับ Double List Boxes</p>
<form action="#">
<span style="font-weight:bold;">ประเภทหนัง:</span>
<select id="productType" onchange="refreshproductList();">
<option value="0">กรุณาเลือกประเภทของหนัง</option>
<option value="1">หนังบู๊แอคชั่น</option>
<option value="2">หนังรักโรแมนติค</option>
<option value="3">หนังตลก</option>
<option value="4">หนังผี</option>
<option value="5">หนังลึกลับมหัศจรรย์</option>
<option value="6">หนังวิทยาศาสตร์</option>
</select>
<span style="font-weight:bold;">ชื่อหนัง:</span>
<select id="productName">
</select>


<input type="submit" name="button" id="button" value="Search" />

</form>
</body>
</html>

ฐานข้อมูล

CREATE TABLE IF NOT EXISTS products (
ProductId int(11) NOT NULL auto_increment,
ProductName varchar(255) NOT NULL DEFAULT '' ,
ProductDetail text NOT NULL DEFAULT '' ,
ProductImage varchar(255) ,
ProductHot int(10) unsigned ,
ProductType int(10) unsigned ,
PRIMARY KEY (ProductId)
);

ผมอยากให้ คลิก ปุ่ม Search แล้วแสดงข้อมูลจาก field ProductDetail มาแสดงต้องทำไงครับ

ตัวอย่างนี้ผมเอา มาจากหนังสือ Web Programming ด้วย Ajax และ PHP:เคทีพี ครับ
ตัวอย่างนี้แค่ เลือกแปรผัน แบบ ajax ได้ เท่านั้น อ่ะครับ ช่วยแนะนำทีนะครับ

Tag : - - - -

Date : 2010-06-11 09:45:21

By : Sacrifice

View : 3871

Reply : 5

No. 1

SOUL

โพสกระทู้ ( 1,751 )
บทความ ( 0 )

ลองเอาไปประยุกต์ดูนะครับ

Code (PHP)

  	

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Untitled Document</title>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="496" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <th scope="col"><select name="cusname" onChange="showtext()">
        <option selected>CUSTOMER</option>
        <option>C1</option>
        <option>C2</option>
        <option>C4</option>
        <option>C5</option>
        <option>C6</option>
        <option>C7</option>
        <option>C8</option>
        <option>C9</option>
        <option>C10</option>
        <option>C11</option>
        <option>C12</option>
        <option>C13</option>
        <option>C14</option>
        <option>C15</option>
        <option>C16</option>
        <option>C17</option>
        <option>C18</option>
        <option>C20</option>
      </select></th>
      <th scope="col"><select name="select1" onChange="changeSelect2(this)">
        <option  value="0" selected>กรุณาเลือกภาควิชา</option>
        <option  value="scin">คณะวิทยาศาสตร์</option>
        <option value="engi">คณะวิศวกรรมศาสตร์</option>
        <option value="arti">คณะศิลปศาสตร์</option>
        <option value="busi">คณะบริหารธุรกิจ</option>
        <option value="econo">คณะเศรษฐศาสตร์</option>
      </select></th>
    </tr>
    <tr>
      <td><input type="text" name="cuscountry" value = "COUNTRY" readonly="readonly"></td>
      <td><select name="select2" >
          <option selected>กรุณาเลือกภาควิชา</option>
      </select></td>
    </tr>
    <tr>
      <td><input type="text" name="cuszone" value="ZONE" readonly="readonly"></td>
      <td><select name="select3" >
          <option selected>กรุณาเลือกสาขา</option>
      </select></td>
    </tr>
  </table>
<br>
    <!-- ใส่ชื่ออัตโนมัติ-->
    <script language="javascript">

var shortcut=document.form1
var aut=new Array()
var aut1=new Array()


//extend this list if neccessary to accomodate more selections
aut[0]="COUNTRY"
aut[1]="PORTUGAL"
aut[2]="U.S.A."
aut[3]="ARGENTINA"
aut[4]="SPAIN"
aut[5]="GREECE"
aut[6]="SPAIN"
aut[7]="CANADA"
aut[8]="PERU"
aut[9]="PERU"
aut[10]="PERU"
aut[11]="PORTUGAL"
aut[12]="GREECE"
aut[13]="PORTUGAL"
aut[14]="POLAND"
aut[15]="ITALY"
aut[16]="THE  NETHERLANDS"
aut[17]="SPAIN"
aut[18]="MEXICO"
aut[19]="KOREA"
aut[20]="PERU"

aut1[0]="ZONE"
aut1[1]="EUROPE"
aut1[2]="AMERICA"
aut1[3]="AMERICA"
aut1[4]="EUROPE"
aut1[5]="EUROPE"
aut1[6]="EUROPE"
aut1[7]="AMERICA"
aut1[8]="AMERICA"
aut1[9]="AMERICA"
aut1[10]="AMERICA"
aut1[11]="EUROPE"
aut1[12]="EUROPE"
aut1[13]="EUROPE"
aut1[14]="EUROPE"
aut1[15]="EUROPE"
aut1[16]="EUROPE"
aut1[17]="EUROPE"
aut1[18]="AMERICA"
aut1[19]="ASIA"
aut1[20]="AMERICA"

function showtext(){
shortcut.cuscountry.value=aut[shortcut.cusname.selectedIndex]
shortcut.cuszone.value=aut1[shortcut.cusname.selectedIndex]
}
function changeSelect2(obj){
var theform = obj.form;
theform.select2.length=0;
theform.select3.length=0;
switch(obj.value){
 case "0":
 {
   theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
   theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
   
   theform.select2=false;
 theform.select3=false;
 }
 break;
 
 case"scin":
 {
  theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
  theform.select2.options[1]=new Option('วิทย์1','วิทย1');
  theform.select2.options[2]=new Option('วิทย์2','วิทย์2');
  theform.select2.options[3]=new Option('วิทย์3','วิทย3');
     theform.select2.options[4]=new Option('วิทย์4','วิทย์4');
  theform.select2.options[5]=new Option('วิทย์5','วิทย์5');

  theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
  theform.select3.options[1]=new Option('วิทย์สาขา1','วิทย์สาขา1');
  theform.select3.options[2]=new Option('วิทย์สาขา2','วิทย์สาขา2');
  theform.select3.options[3]=new Option('วิทย์สาขา3','วิทย์สาขา3');
  theform.select3.options[4]=new Option('วิทย์สาขา4','วิทย์สาขา4');
  theform.select3.options[5]=new Option('วิทย์สาขา5','วิทย์สาขา5');
    
   theform.select2=false;   
   theform.select3=false;
  }
  break;
 
  
 case"engi":
 {
  theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
  theform.select2.options[1]=new Option('วิศวะ1','วิศวะ1');
  theform.select2.options[2]=new Option('วิศวะ2','วิศวะ2');
  theform.select2.options[3]=new Option('วิศวะ3','วิศวะ3');
  theform.select2.options[4]=new Option('วิศวะ4','วิศวะ4');
  theform.select2.options[5]=new Option('วิศวะ5','วิศวะ5');
  theform.select2.options[6]=new Option('วิศวะ6','วิศวะ6');
  theform.select2.options[7]=new Option('วิศวะ7','วิศวะ7');
  theform.select2.options[8]=new Option('วิศวะ8','วิศวะ8');
  theform.select2.options[9]=new Option('วิศวะ9','วิศวะ9');
  theform.select2.options[10]=new Option('วิศวะ10','วิศวะ10');
  theform.select2.options[11]=new Option('วิศวะ11','วิศวะ11');
  theform.select2.options[12]=new Option('วิศวะ12','วิศวะ12');

  theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
  theform.select3.options[1]=new Option('วิศวะสาขา1','วิศวะสาขา1');
  theform.select3.options[2]=new Option('วิศวะสาขา2','วิศวะสาขา2');
  theform.select3.options[3]=new Option('วิศวะสาขา3','วิศวะสาขา3');
  theform.select3.options[4]=new Option('วิศวะสาขา4','วิศวะสาขา4');
  theform.select3.options[5]=new Option('วิศวะสาขา5','วิศวะสาขา5');
   theform.select2=false;
   theform.select3=false;  
  }
  break;


 case"arti":
 {
  theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
  theform.select2.options[1]=new Option('ศิลป1','ศิลป1');
  theform.select2.options[2]=new Option('ศิลป2','ศิลป2');
  theform.select2.options[3]=new Option('ศิลป3','ศิลป3');

  theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
  theform.select3.options[1]=new Option('ศิลปสาขา1','ศิลปสาขา1');
  theform.select3.options[2]=new Option('ศิลปสาขา2','ศิลปสาขา2');
  theform.select3.options[3]=new Option('ศิลปสาขา3','ศิลปสาขา3');
  theform.select3.options[4]=new Option('ศิลปสาขา4','ศิลปสาขา4');
  theform.select3.options[5]=new Option('ศิลปสาขา5','ศิลปสาขา5');
  
   theform.select2=false;
   theform.select3=false;
  }
  break;


 case"busi":
 {
  theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
  theform.select2.options[1]=new Option('BU1','BU1');
  theform.select2.options[2]=new Option('BU2','BU2');
  theform.select2.options[3]=new Option('BU3','BU3');
  theform.select2.options[4]=new Option('BU4','BU4');

  theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
  theform.select3.options[1]=new Option('BUสาขา1','BUสาขา1');
  theform.select3.options[2]=new Option('BUสาขา2','BUสาขา2');
  theform.select3.options[3]=new Option('BUสาขา3','BUสาขา3');
  theform.select3.options[4]=new Option('BUสาขา4','BUสาขา4');
      
   theform.select2=false;
   theform.select3=false;   
    }
  break;


 case"econo":
 {
  theform.select2.options[0]=new Option('กรุณาเลือกภาควิชา','กรุณาเลือกภาควิชา');
  theform.select2.options[1]=new Option('EC1','EC1');
  theform.select2.options[2]=new Option('EC2','EC2');
  theform.select2.options[3]=new Option('EC3','EC3');
  theform.select2.options[4]=new Option('EC4','EC4');
  theform.select2.options[5]=new Option('EC5','EC5');
  theform.select2.options[6]=new Option('EC6','EC6');
  theform.select2.options[7]=new Option('EC7','EC7');

  theform.select3.options[0]=new Option('กรุณาเลือกสาขา','กรุณาเลือกสาขา');
  theform.select3.options[1]=new Option('ECสาขา1','ECสาขา1');
  theform.select3.options[2]=new Option('ECสาขา2','ECสาขา2');
  theform.select3.options[3]=new Option('ECสาขา3','ECสาขา3');
  theform.select3.options[4]=new Option('ECสาขา4','ECสาขา4');
  theform.select3.options[5]=new Option('ECสาขา5','ECสาขา5');
  theform.select3.options[6]=new Option('ECสาขา6','ECสาขา6');
  theform.select3.options[7]=new Option('ECสาขา7','ECสาขา7');
  theform.select3.options[8]=new Option('ECสาขา8','ECสาขา8');
  theform.select3.options[9]=new Option('ECสาขา9','ECสาขา9');
   
   theform.select2=false;
   theform.select3=false;   
  }
  break;    
 
 }
 }


    </script>
        </p>
</form>
</body>
</html>

Date : 2010-06-11 13:41:35

By : SOUL

No. 2

SOUL

โพสกระทู้ ( 1,751 )
บทความ ( 0 )

ผมเห็นว่า Linkนี่น่ามีประโยชน์กับคุณนะครับ
https://www.thaicreate.com/community/dependant-listmenu-dropdownlist.html

ลองเข้าไปดูนะครับ

Date : 2010-06-11 14:02:06

By : SOUL

No. 3

Sacrifice

โพสกระทู้ ( 17 )
บทความ ( 0 )

ข้างบนไม่ใช่ Ajax เป็น javaScript ธรรมดา นิครับ

พอดีผมอยากลองศึกษา Ajax ดูอ่ะครับ ใช้ java ก็ทำได้เหมือนกัน อย่าง #1 ถ้าข้อมูลเพิ่ม
ข้อมูล มันก็ต้องมาเขียนใหม่อะครับ อย่าง #2 ก็ไม่ใช่ Ajax นิครับ
ถ้าเป็น Ajax ต้องมีการใช้ XML ร่วมด้วย อย่าง

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

ผมเขียน ให้กด button search แล้ว ข้อมูลออกมาแบบไม่กระพริบ ไม่เป็นอะครับ
อยากให้กกด ปุ่ม search แล้ว แสดงข้อมูลแบบไม่กระพริบเลยอ่ะครับ ช่วยแนะนำทีครับ

Date : 2010-06-11 14:18:16

By : Sacrifice

No. 4

aobbie

โพสกระทู้ ( 48 )
บทความ ( 0 )

Date : 2011-06-24 10:51:30

By : aobbie_p

No. 5

กร.

โพสกระทู้ ( 34 )
บทความ ( 0 )

ถ้าเราต้องการค้นหาข้อมูลแบบมีเงื่อนไขมาก ๆเช่น and or not จะต้องมี code อะไรพิเศษนอกจาก %% ไหมค่ะ

Date : 2012-04-11 15:10:17

By : kankanit

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : listbox 2 ชั้นแบบ Ajax อยากให้กดปุ่ม แล้วดึงข้อมูลมาแสดงอะครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก