เรื่องการรับค่าจาก List Menu และการแก้ไขโดยดึงค่าจาก DB
จากบทความในเว็บนะครับ ตอนนี้สามารถทำ เพิ่ม ลบ แก้ไข แบบ ajax ได้แล้ว แต่มีปัญหาอยู่ตรงที่ว่า ต้องการให้ช่อง "ชื่ออุปกรณ์" เป็นการเลือก list menu แทนการพิมพ์เอง จากนั้นก็บันทึกลงใน DB (DeviceName) แล้วพอเวลากดแก้ไข ก็ให้แก้ไขจาก List Menu โดยที่ค่าใน List menu จะดึงค่าจาก DB มา (DeviceName) รบกวนพี่ๆช่วยหน่อยครับ ทำโปรเจคจบครับ
Form 1
<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_conn = "localhost";
$database_conn = "phpfusion";
$username_conn = "root";
$password_conn = "1234";
mysql_query("SET NAMES UTF8");
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_conn, $conn);
$query_Recordset1 = "SELECT Name FROM device";
$Recordset1 = mysql_query($query_Recordset1, $conn) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
var HttpRequest = false;
<!-- // ********************************* -->
function checkBrowser(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttpRequest = new XMLHttpRequest();
if (HttpRequest.overrideMimeType) {
HttpRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttpRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
}
<!-- //************************************** -->
function doCallAjax(Mode) {
HttpRequest = false;
checkBrowser();
var url = 'Form 2.php';
if(Mode == "ADD") {
// var pmeters = "tCustomerID=" + encodeURI( document.getElementById("txtCustomerID").value) +
var pmeters ="tName=" + encodeURI( document.getElementById("atxtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("atxtEmail").value ) +
"&tCountryCode=" + encodeURI( document.getElementById("atxtCountryCode").value ) +
"&tBudget=" + encodeURI( document.getElementById("atxtBudget").value ) +
//"&tUsed=" + encodeURI( document.getElementById("atxtUsed").value ) +
"&tMode=" + Mode;
//alert(pmeters);
}
if(Mode == "UPDATE") {
var pmeters = "tCustomerID=" + encodeURI( document.getElementById("txtCustomerID").value) +
"&tName=" + encodeURI( document.getElementById("txtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("txtEmail").value ) +
"&tCountryCode=" + encodeURI( document.getElementById("txtCountryCode").value ) +
"&tBudget=" + encodeURI( document.getElementById("txtBudget").value ) +
//"&tUsed=" + encodeURI( document.getElementById("txtUsed").value ) +
"&tMode=" + Mode;
}
if(Mode == "LIST") {
var pmeters = "";
}
HttpRequest.open('POST',url,true);
HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
HttpRequest.setRequestHeader("Content-length", pmeters.length);
HttpRequest.setRequestHeader("Connection", "close");
HttpRequest.send(pmeters);
HttpRequest.onreadystatechange = function()
{
if(HttpRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<image src='images/ajax_load.gif'>";
}
if(HttpRequest.readyState == 4) // Return Request
{
document.getElementById("editForm").style.display = 'none';
document.getElementById("addForm").style.display = 'none';
document.getElementById("startAdd").style.display = '';
document.getElementById("txtCustomerID").value = '';
document.getElementById("txtName").value = '';
document.getElementById("txtEmail").value = '';
document.getElementById("txtCountryCode").value = '';
document.getElementById("txtBudget").value = '';
//document.getElementById("txtUsed").value = '';
document.getElementById("mySpan").innerHTML = HttpRequest.responseText;
}
}
}
function ShowADD() {
document.getElementById("addForm").style.display = '';
document.getElementById("editForm").style.display = 'none';
document.getElementById("startAdd").style.display = 'none';
document.getElementById("atxtCustomerID").value ='';
document.getElementById("atxtName").value = '';
document.getElementById("atxtEmail").value = '';
document.getElementById("atxtCountryCode").value ='';
document.getElementById("atxtBudget").value ='';
//document.getElementById("atxtUsed").value = '';
}
function ShowEdit(sCustomerID,sName,sEmail,sCountryCode,sBudget,sUsed) {
document.getElementById("editForm").style.display = '';
document.getElementById("addForm").style.display = 'none';
document.getElementById("startAdd").style.display = 'none';
document.getElementById("txtCustomerID").value = sCustomerID;
document.getElementById("txtName").value = sName;
document.getElementById("txtEmail").value = sEmail;
document.getElementById("txtCountryCode").value = sCountryCode;
document.getElementById("txtBudget").value = sBudget;
//document.getElementById("txtUsed").value = sUsed;
}
function ajaxDelete(Mode, txtCustomerID) {
HttpRequest = false;
checkBrowser();
//alert('test');
var url = 'Form 2.php';
var pmeters = "tCustomerID=" + txtCustomerID + "&tMode=" + Mode;
HttpRequest.open('POST',url,true);
HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
HttpRequest.setRequestHeader("Content-length", pmeters.length);
HttpRequest.setRequestHeader("Connection", "close");
HttpRequest.send(pmeters);
HttpRequest.onreadystatechange = function(){
if(HttpRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttpRequest.readyState == 4) // Return Request
{
// document.getElementById("mySpan").innerHTML = HttpRequest.responseText;
doCallAjax('LIST');
}
}
}
</script>
<body Onload="JavaScript:doCallAjax('LIST');">
<form name="frmMain">
<span id="editForm" style="display='none';">
<table width="577" border="1">
<tr>
<th width="91">รหัส</th>
<th width="98">ชื่ออุปกรณ์</th>
<th width="198">ชื่ออาการ</th>
<th width="97">รายละเอียด</th>
<th width="59">วิธีการแก้ไข</th>
</tr>
<tr>
<td><input type="text" name="txtCustomerID" id="txtCustomerID" size="5" disabled="true"></td>
<td><input type="text" name="txtName" id="txtName" size="25"></td>
<td><textarea name="txtEmail" cols="25" rows="5" id="txtEmail"></textarea></td>
<td><textarea name="txtCountryCode" cols="25" rows="5" id="txtCountryCode"></textarea></td>
<td align="right"><textarea name="txtBudget" cols="25" rows="5" id="txtBudget"></textarea></td>
</tr>
</table>
<input type="button" name="btnUpdate" id="btnUpdate" value="แก้ไขข้อมูล" OnClick="JavaScript:doCallAjax('UPDATE');">
<input type="button" name="btnCancelUpdate" id="btnCancelUpdate" value="ยกเลิกการแก้ไขข้อมูล" OnClick="JavaScript:doCallAjax('LIST');">
<br><br>
</span>
<span id="addForm" style="display='none';">
<table width="577" border="1">
<tr>
<th width="91">รหัส</th>
<th width="98">ชื่ออุปกรณ์</th>
<th width="198">ชื่ออาการ</th>
<th width="97">รายละเอียด</th>
<th width="59">วิธีการแก้ไข</th>
</tr>
<tr>
<td><input type="text" name="atxtCustomerID" id="atxtCustomerID" size="5" disabled="true"></td>
<td><input type="text" name="atxtName" id="atxtName" size="25"></td>
<td><textarea name="atxtEmail" cols="25" rows="5" id="atxtEmail"></textarea></td>
<td><textarea name="atxtCountryCode" cols="25" rows="5" id="atxtCountryCode"></textarea></td>
<td align="right"><textarea name="atxtBudget" cols="25" rows="5" id="atxtBudget"></textarea></td>
</tr>
</table>
<input type="button" name="btnADD" id="btnADD" value="เพิ่มข้อมูล" OnClick="JavaScript:doCallAjax('ADD');">
<input type="button" name="btnCancelADD" id="btnCancelADD" value="ยกเลิกการเพิ่มข้อมูล" OnClick="JavaScript:doCallAjax('LIST');" >
<br><br>
</span>
<div id="startAdd" style="display='none';">
<input type="button" name="btnShowADD" id="btnShowADD" value="เพิ่มข้อมูล" OnClick="JavaScript:ShowADD();">
</div>
<span id="mySpan"></span>
</form>
</body>
</html>
Form 2 (PHP)
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_conn = "localhost";
$database_conn = "phpfusion";
$username_conn = "root";
$password_conn = "1234";
mysql_query("SET NAMES UTF8");
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
?>
<?php
$strMode = $_POST["tMode"];
$strID = $_POST["tCustomerID"];
if($strMode == "ADD") {
$strSQL = "INSERT INTO customer SET ";
$strSQL .="Name = '".$_POST["tName"]."' ";
$strSQL .=",Email = '".$_POST["tEmail"]."' ";
$strSQL .=",CountryCode = '".$_POST["tCountryCode"]."' ";
$strSQL .=",Budget = '".$_POST["tBudget"]."' ";
//$strSQL .=",Used = '".$_POST["tUsed"]."' ";
// $strSQL .="WHERE CustomerID = '".$_POST["tCustomerID"]."' ";
$objQuery = mysql_query($strSQL);
} else if($strMode == "UPDATE") {
$strSQL = "UPDATE customer SET ";
$strSQL .="Name = '".$_POST["tName"]."' ";
$strSQL .=",Email = '".$_POST["tEmail"]."' ";
$strSQL .=",CountryCode = '".$_POST["tCountryCode"]."' ";
$strSQL .=",Budget = '".$_POST["tBudget"]."' ";
//$strSQL .=",Used = '".$_POST["tUsed"]."' ";
$strSQL .="WHERE CustomerID = '".$_POST["tCustomerID"]."' ";
$objQuery = mysql_query($strSQL);
} else if($strMode == "DELETE") {
$strSQL = "DELETE FROM customer ";
$strSQL .="WHERE CustomerID = '".$strID."' ";
$objQuery = mysql_query($strSQL);
}
$strSQL = "SELECT * FROM customer WHERE Name LIKE '%".$strSearch."%' ORDER BY CustomerID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="724" border="1">
<tr>
<th width="64"> <div align="center">รหัส</div></th>
<th width="103"> <div align="center">ชื่ออุปกรณ์</div></th>
<th width="122"> <div align="center">ชื่ออาการขัดข้อง</div></th>
<th width="161"> <div align="center">รายละเอียด</div></th>
<th width="139"> <div align="center">วิธีแก้ไข</div></th>
<th width="40"> <div align="center">แก้ไข</div></th>
<th width="49"> <div align="center">ลบ</div></th>
</tr>
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
<tr>
<td><div align="center"><?=$objResult["CustomerID"];?></div></td>
<td><?=$objResult["Name"];?></td>
<td><?=$objResult["Email"];?></td>
<td><div align="center"><?=$objResult["CountryCode"];?></div></td>
<td align="center"><?=$objResult["Budget"];?></td>
<td align="center"><a href="JavaScript:ShowEdit('<?=$objResult["CustomerID"];?>','<?=$objResult["Name"];?>','<?=$objResult["Email"];?>','<?=$objResult["CountryCode"];?>','<?=$objResult["Budget"];?>')">แก้ไข</a></td>
<td align="center"><a href="JavaScript:ajaxDelete('DELETE','<?=$objResult["CustomerID"];?>');" onClick="return confirm('Are you sure you want to delete?')">ลบ</a></td>
</tr>
<?
}
?>
</table>
</body>
</html>
Tag : PHP, MySQL
Date :
2011-07-12 21:15:11
By :
shinigami77
View :
1432
Reply :
2
ไม่ค่อยเข้าใจอ่ะครับพี่ ช่วยอธิบายเป็น Syntax หรือ ตัวอย่้างง่ายๆได้ไหมครับ = =
Date :
2011-07-12 22:38:23
By :
shinigami77
Load balance : Server 02