Forgot Password ??

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

	Registered : 109,027

HOME > PHP > PHP Forum > รบกวนช่วยหน่อยค่ะ ถ้าจะทำแบบในหน้าเพจนี้ ทำยังไงหรอคะ

รบกวนช่วยหน่อยค่ะ ถ้าจะทำแบบในหน้าเพจนี้ ทำยังไงหรอคะ

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

Guest

คือเราจะทำเกมตามในลิงค์นี้อ่ะค่ะ
http://activity.edtguide.com/luckygame-detail/lucky-game-%E0%B8%A5%E0%B8%B8%E0%B9%89%E0%B8%99-gift-set-levis-%E0%B8%8A%E0%B8%B8%E0%B8%94%E0%B8%97%E0%B8%B5%E0%B9%882
แต่ตอนนี้เราทำตารางออกมาได้แล้วนะคะ แต่เมื่อกดลิงค์เพื่อเลือกตัวเลข เราจะทำยังไงเพื่อที่จะ submit ค่าตัวเลขที่เลือกแล้ว insert เข้าฐานข้อมูลอ่ะค่ะ เพราะที่ผ่านมาเราทำแต่แบบ submit โดยผ่านฟอร์มตลอด ต้องใช้โค้ดอะไรทำหรอคะ เพราะเราไม่มีพื้นฐานของ ajax กับ javascript เลย รบกวนช่วยดูหรือแนะนำหน่อยนะคะ ว่าควรเริ่มต้นยังไง ขอบคุณมากค่ะ

นี่เป็นโค้ดของการทำช่องตารางนะคะ

Code (PHP)

<style type="text/css">

ul.boxluckygames{

	display:block;float:left;
 
	list-style:none;

	padding:0;margin:0;

	width:725px; 
text-align: center;
	background-color:#808080;

	border:10px solid #66cc00;  /* เทียบใกล้เคียงกับการกำหนด  ของ table  */	

	padding:2px 0 2px 2px;

}

ul.boxluckygames li{

	list-style:none;

	display:block;float:left;
	

	background-color:#ffff66;

	margin:2px;  /* เทียบใกล้เคียงกับการกำหนด  cellspacing"  ของ table  */

	margin-left:6px;
padding:2px; /* เทียบใกล้เคียงกับการกำหนด  cellpadding  ของ table  */

	border:1px solid #808080;  /* เทียบใกล้เคียงกับการกำหนด border ใน td ของ table  */
border-radius:5px;
	width:34px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */
height:34px;
}
a:link{
     background-color:#ffff66;
	 width:34px; 
	 height:34px; 
}
a:hover{
     background-color:#ff0099;
	 width:34px; 
	 height:34px; 
}
a:active{
     background-color:#666699;
	 width:34px; 
	 height:34px; 
}
a:link {text-decoration:none;}
}
BODY { COLOR: #006666;
}
</style>
<ul class="boxluckygames">
<table>
<?php
include "config.php";
$get_id = (isset($_GET['id'])) ? $_GET['id'] : '';
$string = "SELECT * FROM reward1 ORDER BY r_id DESC limit 1";
$query_string = mysql_query($string);
while($result = mysql_fetch_array($query_string))
{
for ($i=1; $i<=$result["number"]; $i++)
  {
 echo '<li ><a href="#">'.$i.'</a></li>';
  }
}
?>
</ul>

Tag : PHP, HTML/CSS, JavaScript, Ajax

Date : 2013-07-21 10:04:13

By : CDE

View : 615

Reply : 2

No. 1

Krungsri

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

Code (PHP)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(e) {
	$('li').click(function(e) {
		var Current = $(this); //กำหนด Selector หลักเพื่อเรียนใช้งาน
		var ID = Current.attr('id'); // Id ของ li ที่คลิก
		var Text = Current.find('a').text(); //ให้หา tag <a></a> จาก Selector หลักแล้วเอา Text มา
		if(Text!=""){ //ตรวจสอบว่าได้ Text มาหรือไม่ กรณีที่ li เป็น class="selected" มันจะไม่ได้ Text
			$.ajax({ //เริ่มให้ ajax ทำงาน
				url:"insert.php", // URL ของไฟล์ที่จะส่งไปประมวลผล
				type:'POST', // ประเภทที่จะส่งไป GET หรือ POST
				data:{Insert:ID}, // ตัวแปร หรือ พารามิเตอร์ที่จะส่งไป {ชื่อตัวแปร:ค่าที่ส่ง} ชื่อตัวแปรจะต้องตรงกันในไฟล์ที่รับค่า
				success: function(data){ // Call back เมื่อส่งค่าไปประมวลผลจะได้ค่าท่ส่งกลับมาอยู่ในตัวแปร data คือ 0 หรือ 1
					if(data==0){ // กรณีที่เป็น 0 คือ Insert ผ่าน
						Current.find('a').remove(); // ให้ลบ tag <a></a> ออกจาก Selector หลักที่ทำงานอยู่
						//ก่อนลบ <li id="chd_6"><a href="javascript:;" class="lgv">6</a></li>
						Current.addClass('selected').text(Text); // เพิ่ม class="selected" และกำหนด Text ใหม่
						// หลังลบและกำหนดใหหม่ <li id="chd_6" class="selected">6</li>
					}else{ // กรณีที่เป็น 1 คือ Insert ไม่ผ่าน
						alert("ไม่สามารถบันทึกได้!");	
					}
				}
			});
		}
    });
});
</script>
<style type="text/css">
.box-g-lucky {
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding: 15px 13px 13px 15px;
	background: #7b8676
}
.box-g-lucky ul {
	position: relative;
	z-index: 2
}
.box-g-lucky ul li, .h-status li span {
	display: block;
	float: left;
	margin: 0 2px 2px 0;
	width: 34px;
	height: 34px;
	text-align: center;
	cursor: pointer;
	background: #dae049;
	color: #000;
	font: 700 15px/34px Arial;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.9);
	border-radius: .2em;
	box-shadow: 0 -25px 20px -15px rgba(0, 0, 0, 0.25) inset, 0 2px 3px rgba(255, 255, 255, 0.75) inset, 1px 0 2px rgba(0,0,0,0.5)
}
.box-g-lucky ul li.active, 
.box-g-lucky ul li.selected, 
.box-g-lucky ul li.lucky, 
.box-g-lucky ul li:hover, 
.h-status li span.selected, 
.h-status li span.active, 
.h-status li span.lucky {
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.65) inset, -2px -2px 2px rgba(255, 255, 255, 0.95) inset, 1px 0 2px rgba(0,0,0,0.5)
}
.box-g-lucky ul li:hover {
	background: #eaef6e
}
.box-g-lucky ul li.active, .h-status li span.active {
	background: #fff262
}
.box-g-lucky ul li.selected, .h-status li span.selected {
	background: #7a8e9c;
	cursor: not-allowed
}
.box-g-lucky ul li.lucky, .h-status li span.lucky {
	background: #ffa800
}
.box-g-lucky ul li a, .box-g-lucky ul li a:hover {
	color: #000;
	text-decoration: none
}
</style>
</head>

<body>
<div id="game-choice" class="box-g-lucky">
  <ul id="game-play">
    <li id="chd_1" class="selected">1</li>
    <li id="chd_2" class="selected">2</li>
    <li id="chd_3" class="selected">3</li>
    <li id="chd_4" class="selected">4</li>
    <li id="chd_5" class="selected">5</li>
    <li id="chd_6"><a href="javascript:;" class="lgv">6</a></li>
    <li id="chd_7" class="selected">7</li>
    <li id="chd_8" class="selected">8</li>
    <li id="chd_9" class="selected">9</li>
    <li id="chd_10"><a href="javascript:;" class="lgv">10</a></li>
    <li id="chd_11" class="selected">11</li>
    <li id="chd_12" class="selected">12</li>
    <li id="chd_13" class="selected">13</li>
    <li id="chd_14" class="selected">14</li>
    <li id="chd_15"><a href="javascript:;" class="lgv">15</a></li>
    <li id="chd_16"><a href="javascript:;" class="lgv">16</a></li>
    <li id="chd_17" class="selected">17</li>
    <li id="chd_18"><a href="javascript:;" class="lgv">18</a></li>
    <li id="chd_19" class="selected">19</li>
    <li id="chd_20"><a href="javascript:;" class="lgv">20</a></li>
    <li id="chd_21"><a href="javascript:;" class="lgv">21</a></li>
    <li id="chd_22"><a href="javascript:;" class="lgv">22</a></li>
    <li id="chd_23"><a href="javascript:;" class="lgv">23</a></li>
    <li id="chd_24"><a href="javascript:;" class="lgv">24</a></li>
    <li id="chd_25" class="selected">25</li>
    <li id="chd_26"><a href="javascript:;" class="lgv">26</a></li>
    <li id="chd_27" class="selected">27</li>
    <li id="chd_28"><a href="javascript:;" class="lgv">28</a></li>
    <li id="chd_29" class="selected">29</li>
    <li id="chd_30"><a href="javascript:;" class="lgv">30</a></li>
    <li id="chd_31" class="selected">31</li>
    <li id="chd_32"><a href="javascript:;" class="lgv">32</a></li>
    <li id="chd_33" class="selected">33</li>
    <li id="chd_34"><a href="javascript:;" class="lgv">34</a></li>
    <li id="chd_35"><a href="javascript:;" class="lgv">35</a></li>
    <li id="chd_36"><a href="javascript:;" class="lgv">36</a></li>
    <li id="chd_37" class="selected">37</li>
    <li id="chd_38" class="selected">38</li>
    <li id="chd_39" class="selected">39</li>
    <li id="chd_40"><a href="javascript:;" class="lgv">40</a></li>
    <li id="chd_41"><a href="javascript:;" class="lgv">41</a></li>
    <li id="chd_42" class="selected">42</li>
    <li id="chd_43" class="selected">43</li>
    <li id="chd_44" class="selected">44</li>
    <li id="chd_45" class="selected">45</li>
    <li id="chd_46" class="selected">46</li>
    <li id="chd_47"><a href="javascript:;" class="lgv">47</a></li>
    <li id="chd_48"><a href="javascript:;" class="lgv">48</a></li>
    <li id="chd_49" class="selected">49</li>
    <li id="chd_50"><a href="javascript:;" class="lgv">50</a></li>
    <li id="chd_51" class="selected">51</li>
    <li id="chd_52"><a href="javascript:;" class="lgv">52</a></li>
    <li id="chd_53"><a href="javascript:;" class="lgv">53</a></li>
    <li id="chd_54"><a href="javascript:;" class="lgv">54</a></li>
    <li id="chd_55" class="selected">55</li>
    <li id="chd_56" class="selected">56</li>
    <li id="chd_57"><a href="javascript:;" class="lgv">57</a></li>
    <li id="chd_58"><a href="javascript:;" class="lgv">58</a></li>
    <li id="chd_59" class="selected">59</li>
    <li id="chd_60"><a href="javascript:;" class="lgv">60</a></li>
    <li id="chd_61" class="selected">61</li>
    <li id="chd_62"><a href="javascript:;" class="lgv">62</a></li>
    <li id="chd_63"><a href="javascript:;" class="lgv">63</a></li>
    <li id="chd_64"><a href="javascript:;" class="lgv">64</a></li>
    <li id="chd_65"><a href="javascript:;" class="lgv">65</a></li>
    <li id="chd_66" class="selected">66</li>
    <li id="chd_67"><a href="javascript:;" class="lgv">67</a></li>
    <li id="chd_68" class="selected">68</li>
    <li id="chd_69" class="selected">69</li>
    <li id="chd_70" class="lucky">70</li>
    <li id="chd_71" class="selected">71</li>
    <li id="chd_72"><a href="javascript:;" class="lgv">72</a></li>
    <li id="chd_73"><a href="javascript:;" class="lgv">73</a></li>
    <li id="chd_74"><a href="javascript:;" class="lgv">74</a></li>
    <li id="chd_75"><a href="javascript:;" class="lgv">75</a></li>
    <li id="chd_76"><a href="javascript:;" class="lgv">76</a></li>
    <li id="chd_77"><a href="javascript:;" class="lgv">77</a></li>
    <li id="chd_78"><a href="javascript:;" class="lgv">78</a></li>
    <li id="chd_79" class="selected">79</li>
    <li id="chd_80"><a href="javascript:;" class="lgv">80</a></li>
    <li id="chd_81"><a href="javascript:;" class="lgv">81</a></li>
    <li id="chd_82"><a href="javascript:;" class="lgv">82</a></li>
    <li id="chd_83"><a href="javascript:;" class="lgv">83</a></li>
    <li id="chd_84"><a href="javascript:;" class="lgv">84</a></li>
    <li id="chd_85" class="selected">85</li>
    <li id="chd_86"><a href="javascript:;" class="lgv">86</a></li>
    <li id="chd_87"><a href="javascript:;" class="lgv">87</a></li>
    <li id="chd_88" class="selected">88</li>
    <li id="chd_89" class="selected">89</li>
    <li id="chd_90" class="selected">90</li>
    <li id="chd_91" class="selected">91</li>
    <li id="chd_92" class="selected">92</li>
    <li id="chd_93" class="selected">93</li>
    <li id="chd_94" class="selected">94</li>
    <li id="chd_95" class="selected">95</li>
    <li id="chd_96" class="selected">96</li>
    <li id="chd_97" class="selected">97</li>
    <li id="chd_98" class="selected">98</li>
    <li id="chd_99" class="selected">99</li>
    <li id="chd_100"><a href="javascript:;" class="lgv">100</a></li>
  </ul>
</div>
</body>
</html>

insert.php

<?
	$id = $_POST['Insert'];
	$sql = "Insert Into Table(ID) Value('$id')";
	
	//กรณีที่ Query ข้อมูลให้เปิดตัวนี้จะ Return แค่ 0 กับ 1 ไปให่ ajax
	/*if(mysql_query($sql)){ 
		echo '0';
	}else{
		echo '1';	
	}*/
	
	// ทดลองว่า Insert ผ่านจะได้ 0 หากเปิดตัวบนให้ปิดตัวนี้
	echo '0';
?>

Date : 2013-07-21 12:16:58

By : Krungsri

No. 2

Guest

ขอบคุณมากๆเลยนะคะ จะลองนำไปทำดูค่ะ ขอบคุณพี่ Krungsri มากจริงๆค่ะ

Date : 2013-07-21 16:27:16

By : CDE

ค้นหาข้อมูล

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

Re : รบกวนช่วยหน่อยค่ะ ถ้าจะทำแบบในหน้าเพจนี้ ทำยังไงหรอคะ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

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

Load balance : Server 00