Forgot Password ??

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

	Registered : 109,027

HOME > PHP > PHP Forum > ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ

ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ

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

suppanat2015

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

คือผมต้องการส่งค่าจากหน้าแรกมายังหน้า Google Chart อะครับตอนนี้ส่งแบบ PHP Action ในหน้า Google Chart ได้ครับแต่อยากใช้พวก Jquery ส่งค่าให้หน้า Google Chart แล้วดึงหน้านั้นมาแสดงใน <div> display พอมีวิธีไหมครับ ช่วยเด็กๆ อย่างผมหน่อยนะครับ โค้าอาจจะไม่เป็นระเบียบเพราะผมมือใหม่ ยังไงรบกวนพี่หน่อยนะ

#หน้า Form

Code (PHP)

<!DOCTYPE html>
<html lang="en-gb">
  <head>
  </head>
  <body>
<div style="width:400px;">
		<section class="loginform cf">
		<form name="google-chart" class="google-chart-form" action="google-chart.php" method="post" accept-charset="utf-8">
<li><label for="datagharpforX" style="margin-lef:t5px; font-size:14px; margin-right:5px;"><span></span>ข้อมูลคุณภาพน้ำในแกน X</label></li>
<li><input id="X" type="radio" name="X" value="Salinity" checked="checked"><label for="Salinity"><span><span></span></span>Salinity</label></li>
<li><input id="X" type="radio" name="X" value="Alkalinity" ><label for="Alkalinity"><span><span></span></span>Alkalinity</label></li>
<li><input id="X" type="radio" name="X" value="TAN"><label for="TAN"><span><span></span></span>TAN</label></li>
<li><input id="X" type="radio" name="X" value="Nitrile"><label for="Nitrile"><span><span></span></span>Nitrile</label></li>
<li><input id="X" type="radio" name="X" value="Nitrate"><label for="Nitrate"><span><span></span></span>Nitrate</label></li>
<li><input id="X" type="radio" name="X" value="phosphate"><label for="phosphate"><span><span></span></span>phosphate</label></li>
<li><input id="X" type="radio" name="X" value="DO"><label for="DO"><span><span></span></span>DO</label></li>
<li><input id="X" type="radio" name="X" value="PH"><label for="PH"><span><span></span></span>PH</label></li>
<li><input id="X" type="radio" name="X" value="Calcium"><label for="Calcium"><span><span></span></span>Calcium</label></li>
<li><input id="X" type="radio" name="X" value="Magnesium"><label for="Magnesium"><span><span></span></span>Magnesium</label></li>
<br /><br />
<li><label for="datagharpforX" style="margin-left:5px; font-size:14px; margin-right:5px;"><span></span>ข้อมูลคุณภาพน้ำในแกน Y</label></li>
<li><input id="Y" type="radio" name="Y" value="Salinity" ><label for="Salinity"><span><span></span></span>Salinity</label></li>
<li><input id="Y" type="radio" name="Y" value="Alkalinity" checked="checked" ><label for="Alkalinity"><span><span></span></span>Alkalinity</label></li>
<li><input id="Y" type="radio" name="Y" value="TAN"><label for="TAN"><span><span></span></span>TAN</label></li>
<li><input id="Y" type="radio" name="Y" value="Nitrile"><label for="Nitrile"><span><span></span></span>Nitrile</label></li>
<li><input id="Y" type="radio" name="Y" value="Nitrate"><label for="Nitrate"><span><span></span></span>Nitrate</label></li>
<li><input id="Y" type="radio" name="Y" value="phosphate"><label for="phosphate"><span><span></span></span>phosphate</label></li>
<li><input id="Y" type="radio" name="Y" value="DO"><label for="DO"><span><span></span></span>DO</label></li>
<li><input id="Y" type="radio" name="Y" value="PH"><label for="PH"><span><span></span></span>PH</label></li>
<li><input id="Y" type="radio" name="Y" value="Calcium"><label for="Calcium"><span><span></span></span>Calcium</label></li>
<li><input id="Y" type="radio" name="Y" value="Magnesium"><label for="Magnesium"><span><span></span></span>Magnesium</label></li>

<br /><br />
<label for="Provice" style="margin-left:5px; font-size:14px; margin-right:5px; margin-top:10px;"><span><span></span></span>โปรดเลือกจังหวัด</label>

<select id="soflow" name="point_id" style="margin-top:20px;">
  <option value="0">---- เลือกพื้นที่ของข้อมูล ----</option>
  <option value="8080"> ทุกพื้นที่ </option>

<?php include_once ("inc/fontUTF8.inc.php"); include_once ("inc/connectdb.inc.php");
						$sql_conn = mysql_connect($db_host,$db_user,$db_pass);	mysql_select_db ($db_name);
						$sql = "SELECT * FROM point_learn;";	mysql_query("SET NAMES UTF8");	$sql_query = mysql_query($sql,$sql_conn);
						while($row = mysql_fetch_array($sql_query)){			 	 
      					echo "<option value=\"$row[0]\" >$row[point_address]</option> " ;}?>">
</select>
<ul>
<li>
<input name="Submit" type="submit" id="submitbtn" value="แสดงข้อมูล"></li>
</ul>
</form>
</section></div>
<div id='[font=Verdana]display[/font]' style='margin-left:30px;'></div
 ></body>
</html>

ส่งค่ามาหน้า Google Chart

Code (PHP)

<?

	  echo $_POST["X"]."<br />";
	  echo $_POST["Y"]."<br />";
	  echo $_POST["point_id"]."<br />";
	  
	  	include_once ("inc/fontUTF8.inc.php");
		include_once ("inc/connectdb.inc.php");
		$sql_conn = mysql_connect($db_host,$db_user,$db_pass);
		mysql_select_db ($db_name);
		$sql =  "SELECT quality_id , $_POST[X] , $_POST[Y] FROM water_quality where point_id like '$_POST[point_id]%' ";
		mysql_query("SET NAMES UTF8");
		$sql_query = mysql_query($sql,$sql_conn);
		$j = 0;
		while ($row = @mysql_fetch_array($sql_query)){
				$hdata[$j] = $row['quality_id'];
				$data1[$j] = $row[ $_POST["X"]];
				$data2[$j] = $row[$_POST["Y"]];
				$j = $j+1;
		}
			for($i=0;$i<count($hdata);$i++){
				echo "[".$data1[$i].",".$data2[$i]."]";	}
  ?>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
		['<? echo $_POST["X"];?>', '<? echo$_POST["Y"]?>'],
		 <?php
        	for($i=0;$i<count($hdata);$i++){
				echo "[".$data1[$i].",".$data2[$i]."],";				
			}
			?>
	      
        ]);

        var options = {
		 title: '<? echo "กราฟความสัมพันธ์ของ ".$_POST["X"]." และ ".$_POST["Y"];?>',
          hAxis: {title: '<? echo $_POST["X"];?>', minValue: 0, maxValue: 1},
          vAxis: {title: '<? echo$_POST["Y"];?>', minValue: 0, maxValue: 1},
          chartArea: {width:'70%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

       // options.trendlines[0].type = 'Exponential';
        options.colors = ['#6F9654'];

      //  var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
    //    chartExponential.draw(data, options);
      }
    </script>
  <body>
    <div id="chartLinear" style="height: 400px; width: 800px"></div>
  </body>
</html>

Tag : PHP, MySQL, JavaScript, Ajax, jQuery, CakePHP

ประวัติการแก้ไข
2015-03-01 12:58:51

Date : 2015-03-01 09:31:52

By : suppanat2015

View : 1072

Reply : 1

No. 1

Chaidhanan

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

เอาเป็นตัวอย่าง jquery ajax ไปลองศึกษาดูนะครับ เพื่อจะได้ไอเดีย
Code (PHP)

<?php
session_start();
$_SESSION['rownum']=isset($_SESSION['rownum'])? $_SESSION['rownum'] : 0;
if(isset($_POST['getdata'])){
	echo '<tr><td>'.(++$_SESSION['rownum']).'</td><td>Message '.$_POST['value'],' '.$_SESSION['rownum'].'</td></tr>';
	exit;
}
if(isset($_GET['cleardata'])) { $_SESSION['rownum']=0; exit; }
?>
<!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>Untitled Document</title>
</head>
<body>
<!-- ///////// หาโหลดมาใช้ด้วยนะครับ ////////////////////// -->
<script language="javascript" src="../jquery-2.1.1.min.js"></script>
<!-- ///////////////////////////////////////////// -->
<script language="javascript" type="text/javascript">
$(document).ready(function(e) {
	$('#select_job').change(function(e) {
		if($(this).val()>''){
			$.ajax({ url: '', type:'POST', data:{ getdata: 'test', value: $(this).val() }}).done(function(msg){
				$('#testTB').append(msg);
			});
		}
	});
	$('button').click(function(e){
		$('#testTB').empty().append('<tr><th>Item</th><th>Description</th></tr>');
		$.ajax({ url:'?cleardata=1'});
	});
});
</script>
<select id="select_job" >
<option value="">-- Select Your Job --</option>
<option value="getYourJob1">getYourJob1</option>
<option value="getYourJob2">getYourJob2</option>
</select><br />
<button type="button">clear</button>
<table border="1" id="testTB">
<tr><th>Item</th><th>Description</th></tr>
</table>
</body>
</html>

Date : 2015-03-01 16:04:03

By : Chaidhanan

ค้นหาข้อมูล

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

Re : ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

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

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

Load balance : Server 03

Registered : 109,027

document.write("<font color=996600>[PHP]</font>"); ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ

No. 1

ค้นหาข้อมูล

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

Notice

ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ