|
 |
| |
ส่งค่าด้วย Jquery มาแสดงใน diiv ไม่เปลี่ยนหน้า PHP Mysql ไม่ค่อยชำนาญรบกวนหน่อยครับ |
| |
 |
|
|
 |
 |
|
คือผมต้องการส่งค่าจากหน้าแรกมายังหน้า 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 :
1119 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เอาเป็นตัวอย่าง 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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
