Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > สอบถาม เลือกเมนู ajax 2 เมนู และ เปลี่ยน รูปภาพ เองทันทีด้วยครับ



 

สอบถาม เลือกเมนู ajax 2 เมนู และ เปลี่ยน รูปภาพ เองทันทีด้วยครับ

 



Topic : 117015



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



สถานะออฟไลน์




ขอความช่วยเหลือด้วยครับ
สิ่งที่ต้องการให้ช่วยคือ
1. การเลือกเมนู
จะมีอยู่ 2 เมนู โดยเมนูที่ 1 ยี้ห้อรถยนต์ เมื่อทำการเลือกแล้ว เมนูที่ 2 จะ List รายการ รุ่นรถยนต์ ของยี้ห้อนั้นๆ
2. การเปลี่ยนรูปภาพ
เมื่อทำการเลือกยี้ห้อ ให้ทำการเปลี่ยนรูปภาพขึ้นมาแสดง ของยี้ห้อรถยนต์ ล่าสุดขึ้นมาแสดง
เมื่อทำการเลือก รุ่นรถยนต์ ให้ทำการเปลี่ยนรูปภาพ ของรุ่นรถยนต์ ล่าสุดขึ้นมาแสดง
โดยทั่ง 2 ข้อจะทำการพร้อมกันนะครับ
3. การนำฟิลด์ product_head_id ที่ได้จาก Table product_head
$query="SELECT product_head_id, product_head_name FROM product_head ORDER BY product_head_name ASC ";
ไปใส่เงื่อน where ในTable product
เพื่อทำการดึงรูปภาพ ฟิลด์ product_image ที่อยู่ใน Table product
$query2="SELECT product_image FROM product"

รูปแบบ SELECT product_image FROM product where product_image = 'ตัวแปรฟิล์ ที่ได้จาก Table product_head'

โดยมี ไฟล์ 4 ไฟล์ ที่ใช้ด้งนี้
ไฟล์ index_v2.php

Code (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>jquery use json data</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<?php include("ajax.php");?>
</head>

<body onload="Add();">
<form name="frmMain" action="" method="post">
<label for="product_head">ยี้ห้อรถยนต์</label>
<select name="product_head" id="product_head">
</select>
<label for="ProID">รหัสยี้ห้อรถยนต์</label>
<input type="text" name="Carid" id="Carid" />
<p>
  <label for="model">รุ่นรถยนต์</label>
  <select name="model" id="model">
  </select>
  <label for="DisID">รหัสรุ่นรถยนต์</label>
  <input type="text" name="DisID" id="DisID" />
</P>
<p>
  <label for="model2"></label>
</P>

<script language="JavaScript">
	function showImg(imgsrc)
	{
		document.frmMain.imgAvatar.src=imgsrc;
	}
</script>
<a href="javascript:showImg('Koala.jpg');">Plakrim</a> <br>
<a href="javascript:showImg('Penguins.jpg');">Win</a>
<hr>
<img id="imgAvatar">
</form>
</body>
</html>


2. ไฟล์ getdata.php

Code (PHP)
<?php
	require("mysql2json.class.php");
	$hostname_connection = "localhost";
	$database_connection = "xxxxx";
	$username_connection = "xxxxx";
	$password_connection = "xxxxx";
	$connection = mysql_connect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR); 
	mysql_query("SET character_set_results=utf8");
	mysql_query("SET character_set_client=utf8");
	mysql_query("SET character_set_connection=utf8");
	mysql_select_db($database_connection, $connection);
	
	$ID=$_GET[ID];
	$type=$_GET[TYPE];
	
	if($type=='product_head'){
		$query="SELECT product_head_id, product_head_name FROM product_head ORDER BY product_head_name ASC ";
	}else if($type=='model') {
		$query="SELECT MODEL_ID, MODEL_NAME FROM model WHERE product_head_id='".$ID."'";
	} else if($type=='model2'){
		$query="SELECT MODEL_ID, MODEL_NAME FROM model2 WHERE MODEL_ID='".$ID."'";
	} else if($type=='Postcode'){
		$query="SELECT POST_CODE FROM amphur_postcode WHERE AMPHUR_ID='".$ID."'";
	}
	$result=mysql_query($query,$connection);
	$num=mysql_affected_rows();
	
	$json=new mysql2json;
	$data=$json->getJSON($result,$num);
	echo $data;
?>


3. ไฟล์ ajax.php

Code (PHP)
<?php
	require("mysql2json.class.php");
	$hostname_connection = "localhost";
	$database_connection = "prosoftsal_car";
	$username_connection = "prosoftsal_car";
	$password_connection = "car55";
	$connection = mysql_connect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR); 
	mysql_query("SET character_set_results=utf8");
	mysql_query("SET character_set_client=utf8");
	mysql_query("SET character_set_connection=utf8");
	mysql_select_db($database_connection, $connection);
?>
<script language="javascript">
// JavaScript Document
$(document).ready(function(){
	// ส่วนของจังหวัดเมื่อมีการเปลี่ยนแปลง
	$("#product_head").change(function(){
		$("#Subdistrict").empty();//ล้างข้อมูล
		$("#Postcode").empty();//ล้างข้อมูล
		$("#DisID").val("");//ล้างข้อมูล
		$("#SubID").val("");//ล้างข้อมูล
		$("#PostID").val("");//ล้างข้อมูล
		$.ajax({
			  url: "getdata.php",//ที่อยู่ของไฟล์เป้าหมาย
			  global: false,
			  type: "GET",//รูปแบบข้อมูลที่จะส่ง
			  data: ({ID : $(this).val(),TYPE : "model"}), //ข้อมูลที่ส่ง  { ชื่อตัวแปร : ค่าตัวแปร }
			  dataType: "JSON", //รูปแบบข้อมูลที่ส่งกลับ xml,script,json,jsonp,text
			  async:false,
			  success: function(jd) { //แสดงข้อมูลเมื่อทำงานเสร็จ โดยใช้ each ของ jQuery
							var opt="<option value=\"0\" selected=\"selected\">---โปรดเลือกรุ่นรถยนต์---</option>";
							$.each(jd, function(key, val){
								opt +="<option value='"+ val["MODEL_ID"] +"'>"+val["MODEL_NAME"]+"</option>"
    						});
							$("#model").html( opt );//เพิ่มค่าลงใน Select ของอำเภอ
		   	  }
		});	

		$("#Carid").val($(this).val()); //กำหนดค่า ID ของจังหวัดที่เลือกให้กับ Textfield ของจังหวัด
	});
	// ส่วนของอำเภอเมื่อมีการเปลี่ยนแปลง
	$("#model").change(function(){
		$("#Subdistrict").empty();
		$("#Postcode").empty();
		$("#SubID").val("");
		$("#PostID").val("");
		$.ajax({
			  url: "getdata.php",
			  global: false,
			  type: "GET",
			  data: ({ID : $(this).val(),TYPE : "Subdistrict"}),
			  dataType: "JSON",
			  async:false,
			  success: function(jd) {
							var opt="<option value=\"0\" selected=\"selected\">---เลือกตำบล---</option>";
							$.each(jd, function(key, val){
								opt +="<option value='"+ val["MODEL_ID"] +"'>"+val["MODEL_NAME"]+"</option>"
    						});
							$("#Subdistrict").html( opt );
		   	  }
		 });
		  $("#DisID").val($(this).val());
	     alert(document.getElementById('Carid').value);
		 <?

   
		/*   $query="SELECT product_image FROM product order by product_id desc limit 2,1";
		   $rs_products_num3 = mysql_query($query, $connection) or die(mysql_error());
		   $row_rs_products_num3 = mysql_fetch_assoc($rs_products_num3);
		   $product_image_v2 = $row_rs_products_num3["product_image"];
		   $image_v2 = "Koala.jpg";
		  */ 
		 ?>
	//	 alert(<?=$product_image_v2;?>);

      <?php	$image_v2 = "Koala.jpg"; ?>

		 document.frmMain.imgAvatar.src='<?=$image_v2;?>';
		 
	});
	// ส่วนของตำบลเมื่อมีการเปลี่ยนแปลง
	$("#Subdistrict").change(function(){
		$("#PostID").val("");
		$.ajax({
			  url: "getdata.php",
			  type: "GET",
			  data: ({ID : $("#District").val(),TYPE : "Postcode"}),
			  dataType: "JSON",
			  success: function(jd) {
							var opt="<option value=\"0\" selected=\"selected\">---เลือกรหัสไปรษณีย์---</option>";
							$.each(jd, function(key, val){
								opt +="<option value='"+ val["POST_CODE"] +"'>"+val["POST_CODE"]+"</option>"
    						});
							$("#Postcode").html( opt );
		   	  }
		 });
		 $("#SubID").val($("#Subdistrict").val());
	});
	// ส่วนของรหัสไปรษณีย์เมื่อมีการเปลี่ยนแปลง
	$("#Postcode").change(function(){
		$("#PostID").val($(this).val());
	});
});
//ส่วนของ function เพื่อเพิ่มข้อมูลจังหวัดเข้าไปก่อน
function Add(){
		$.ajax({
			  url: "getdata.php",
			  global: false,
			  type: "GET",
			  data: ({TYPE : "product_head"}),
			  dataType: "JSON",
			  async:false,
			  success: function(jd) {
							var opt="<option value=\"0\" selected=\"selected\">---โปรดเลือกยี้ห้อรถยนต์---</option>";
							$.each(jd, function(key, val){
								opt +="<option value='"+ val["product_head_id"] +"'>"+val["product_head_name"]+"</option>"
    						});
							$("#product_head").html( opt );
		   	  }
		});
}
</script>


4.ไฟล์ mysql2json.class.php

Code (PHP)
<?php
/** 
* Filename: mysql2json.class.php 
* Purpose: Convert mysql resultset data into JSON(http://json.org) format
* Author: Adnan Siddiqi <[email protected]> 
* License: PHP License 
* Date: Tuesday,June 21, 2006 
*
*/
class mysql2json{
 function getJSON($resultSet,$affectedRecords){
 $numberRows=0;
 $arrfieldName=array();
 $i=0;
 $json="";
	//print("Test");
 	while ($i < mysql_num_fields($resultSet))  {
 		$meta = mysql_fetch_field($resultSet, $i);
		if (!$meta) {
		}else{
		$arrfieldName[$i]=$meta->name;
		}
		$i++;
 	}
	 $i=0;
	  $json="[\n";
	while($row=mysql_fetch_array($resultSet, MYSQL_NUM)) {
		$i++;
		$json.="{\n";
		for($r=0;$r < count($arrfieldName);$r++) {
			$json.=" \"$arrfieldName[$r]\" :	\"$row[$r]\"";
			if($r < count($arrfieldName)-1){
				$json.=",\n";
			}else{
				$json.="\n";
			}
		}
		 if($i!=$affectedRecords){
		 	$json.="\n},\n";
		 }else{
		 	$json.="\n}\n";
		 }	
	}
	$json.="\n]";
	
	return $json;
 }
}
?>


ช่วยด้วยนะครับ ขอบคุณครับ



Tag : PHP






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-06-09 10:42:01 By : gimchai2 View : 1051 Reply : 2
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

แนะนำเปลี่ยนวิธีถามใหม่น่ะครับ เอา Scope เฉพาะตรงที่มีปัยหา เอา Code ยาว ๆ แบบนี้มันดูยากน่ะครับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-06-09 14:13:29 By : mr.win
 


 

No. 2



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



สถานะออฟไลน์


ครับ
จุดประสงค์ที่ต้องการคือ
1. การเลือกเมนู
จะมีอยู่ 2 เมนู โดยเมนูที่ 1 ยี้ห้อรถยนต์ เมื่อทำการเลือกแล้ว เมนูที่ 2 จะ List รายการ รุ่นรถยนต์ ของยี้ห้อนั้นๆ
2. การเปลี่ยนรูปภาพ
เมื่อทำการเลือกยี้ห้อ ให้ทำการเปลี่ยนรูปภาพขึ้นมาแสดง ของยี้ห้อรถยนต์ ล่าสุดขึ้นมาแสดง
เมื่อทำการเลือก รุ่นรถยนต์ ให้ทำการเปลี่ยนรูปภาพ ของรุ่นรถยนต์ ล่าสุดขึ้นมาแสดง
โดยทั่ง 2 ข้อจะทำการพร้อมกันนะครับ

ใครพอจะมี code ไหมครับ

ที่ผมทำได้แล้วคือข้อ 1 ครับ ส่วนข้อ2 ยังทำไม่ได้ครับ (ในส่วนเลือกเมนูยี้ห้อกับรุ่นรถยนต์แล้วเปลี่ยนรูปรถยนต์ไปด้วยครับ)

ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-06-09 15:54:21 By : gimchai2
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : สอบถาม เลือกเมนู ajax 2 เมนู และ เปลี่ยน รูปภาพ เองทันทีด้วยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่