|
 |
| |
ปัญหาการใช้งาน Text search ร่วมกับ Dynamic rows แสดงผลค่า Row แรกเท่านั้น |
| |
 |
|
|
 |
 |
|
ผมทดสอบ Code สร้างแบบฟอร์มสั่งสินค้าโดยเพิ่ม Dynamic Rows และค้นหาจากรหัสสินค้าได้
โดยนำ script text search ร่วมกับ Dynamic rows จากสองแหล่งมารวมกัน
Dynamic rows ทำงานได้ดี พบปัญหา
1 คอลัมน์เยื้องในrows ที่เพิ่มขึ้น
2 ผลลัพธ์การค้นหารหัสและชื่อสินค้าจะทำได้เฉพาะ row แรกเท่านั้น ไม่สามารถแสดงผลชื่อสินค้า rows ที่เพิ่มใหม่
3 ต้องการ Sort ตัวแปร rtype[$i] ตามด้วย rpcode[$i] เมื่อนำไปแสดงบน Mail content
รบกวนวิธีแก้ไขด้วยด้วยครับ
หรือหากมี Code อื่นที่เหมาะสมกว่านี้ก็ยินดีมาก
ขออภัยที่ Code ไม่เรียบร้อยครับ ตัดแปะมาลองใช้ดู
ขอบคุณครับ
Code (maincode.php)
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
var radio = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
//findproduct
var HttPRequest = false;
function doCallAjax(frpcode,fspcode) {
HttPRequest = false;
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;
}
var url = 'findproductname.php';
var pmeters = "tProductID=" + encodeURI( document.getElementById(frpcode).value);
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById(fProductName).innerHTML = "..";
}
if(HttPRequest.readyState == 4) // Return Request
{
var myProduct = HttPRequest.responseText;
if(myProduct != "")
{
var myArr = myProduct.split("|");
document.getElementById(fspcode).value = myArr[0];
//document.getElementById(fPrice).value = myArr[1];
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<form name="orderform" action="recrow.php" method="POST">
<TABLE id="Head" width="499px" border="0">
<tr><th>เลือก</th><th>รหัส</th><th>ชื่อสินค้า</th><th>จำนวน</th><th> วิธีการสั่งซื้อ</th></tr>
<TABLE id="dataTable" width="550px" border="0">
<TR>
<th><INPUT type="checkbox" name="chk[$i]" id="txtProductchk[$i]" /></th>
<th><INPUT type="text" name="rpcode[$i]" id="txtProductID[$i]" size = "3"
OnChange="JavaScript:doCallAjax('txtProductID[$i]','txtProductName[$i]');" /></th>
<th><INPUT type="text" name="rspcode[$i]" id="txtProductName[$i]" size = "25" /></th>
<th><INPUT type="text" name="rpamt[$i]" id="txtProductamt[$i]" size = "3" /></th>
<th><SELECT name="rtype[$i]" id="txtProducttype[$i]">
<OPTION value="0">0</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
</SELECT></th>
</TR>
</TABLE>
<INPUT type="button" value="เพิ่มช่องสั่งสินค้า" onclick="addRow('dataTable')" />
<INPUT type="button" value="เลือกแล้วลบรายการ" onclick="deleteRow('dataTable')" />
<input type="submit" value= "สั่งสินค้า" >
</BODY>
</HTML>
Code (findproductname.php)
<?php
$strProduct = trim($_POST["tProductID"]);
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("test");
mysql_query("SET NAMES utf8");
$strSQL = "SELECT * FROM product WHERE pcode = '".$strProduct."' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
if($objResult)
{
echo $objResult["tname"]."|".$objResult["rprice"];
}
mysql_close($objConnect);
?>
Tag : PHP, Ajax
|
|
|
 |
 |
 |
 |
| Date :
2012-07-05 10:14:03 |
By :
q12 |
View :
1841 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุณ Mr.win ครับ
กำลังแกะ Code ที่แนะนำมาอยู่ คงต้องใช้เวลาสักพัก
ท่านใดมีคำแนะนำแก้ไข Code เดิมที่เขียนไว้ให้ทำงานได้
โดยเฉพาะปัญหาการ Search ไม่ทำงาน เมื่อเพิ่ม Rows
ก็จะขอบคุณมากครับ
ส่วนปัญหาข้อสาม พอนึกแนวทางใหม่ออกแล้ว
คิดว่าจะ เอาตัวแปรไปเข้า Loop IF แล้ว เอาผลไปต่อกันใหม่
เดิมพยายามใช้ Sort array แต่ไม่สำเร็จเพราะผมไม่ได้ตั้งตัวแปรรับค่าForm เป็น Array
|
| |
|
|
| |
| Date :
2012-07-06 07:35:37 |
By :
q12 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จากที่ Mr.win แนะนำ
ผมพยายามใส่ Input ค่า row ที่ต้องการในฟอร์ม
โดยใช้
rowuse <input type="text" name="xrow" value = "8" size="7" >
รับค่าไปใช้โดย
$vrow = $_POST["xrow"];
แต่ทำไม่สำเร็จ รบกวนช่วยเหลือด้วยครับ
และอยากได้ปุ่ม + ค่า row ทีละ 1 ต่อท้ายฟอร์มด้วย
ขอบคุณครับ
ส่วนปัญหา sort ทำได้แล้วครับ
Code (PHP)
<html>
<head>
<title>ThaiCreate.Com</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name*="txtCustomerID"]').change("change", function (){
var currentIndex = $(this).closest("tr")[0].rowIndex;
$.ajax({
url: "returnCustomer3.php" ,
type: "POST",
data: 'sCusID=' +$("#txtCustomerID"+currentIndex).val()
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj == '')
{
$("#txtCustomerID"+currentIndex).val('');
$("#txtName"+currentIndex).val('');
$("#txtEmail"+currentIndex).val('');
$("#txtCountryCode"+currentIndex).val('');
$("#txtBudget"+currentIndex).val('');
$("#txtUsed"+currentIndex).val('');
}
else
{
$.each(obj, function(key, inval) {
$("#txtCustomerID"+currentIndex).val(inval["CustomerID"]);
$("#txtName"+currentIndex).val(inval["Name"]);
$("#txtEmail"+currentIndex).val(inval["Email"]);
$("#txtCountryCode"+currentIndex).val(inval["CountryCode"]);
$("#txtBudget"+currentIndex).val(inval["Budget"]);
$("#txtUsed"+currentIndex).val(inval["Used"]);
});
}
});
});
});
</script>
</head>
<body>
<h2>jQuery Auto fill ดึงข้อมูลอัตโนมัติ แบบตารางหลายแถว</h2>
<form action="phpMySQLAddSave.php" name="frmAdd" method="post">
rowuse <input type="text" name="xrow" value = "8" size="7" >
<table width="600" border="1">
<tr>
<th width="91"> <div align="center">CustomerID </div></th>
<th width="160"> <div align="center">Name </div></th>
<th width="198"> <div align="center">Email </div></th>
<th width="97"> <div align="center">CountryCode </div></th>
<th width="70"> <div align="center">Budget </div></th>
<th width="70"> <div align="center">Used </div></th>
</tr>
<?
//$vrow = $_POST["xrow"];
$vrow = 6;
for($i=1;$i<=$vrow;$i++)
{
?>
<tr>
<td><div align="center"><input type="text" name="txtCustomerID<?=$i;?>" id="txtCustomerID<?=$i;?>" size="5"></div></td>
<td><input type="text" name="txtName<?=$i;?>" id="txtName<?=$i;?>" size="20"></td>
<td><input type="text" name="txtEmail<?=$i;?>" id="txtEmail<?=$i;?>" size="25"></td>
<td><div align="center"><input type="text" name="txtCountryCode<?=$i;?>" id="txtCountryCode<?=$i;?>" size="2"></div></td>
<td align="right"><input type="text" name="txtBudget<?=$i;?>" id="txtBudget<?=$i;?>" size="5"></td>
<td align="right"><input type="text" name="txtUsed<?=$i;?>" id="txtUsed<?=$i;?>" size="5"></td>
</tr>
<?
}
?>
</table>
<input type="hidden" name="hdnLine" value="<?=$i;?>">
</form>
</body>
</html>
|
| |
|
|
| |
| Date :
2012-07-07 08:53:08 |
By :
q12 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณMr. Win ครับ มีประโยชน์มาก โดยเฉพาะตัวที่ใส่จำนวนแถวได้ ตรงกับที่ต้องการเลย
แต่ผมพอพยายามที่จะเพิ่ม Function search เข้าไป มันไม่ออก
code ทั้งสอง ตัวทำงานแยกได้ดีครับ แต่พอเอามารวมกัน มันจะ search ไม่สำเร็จ
และผมยังไม่สามารถแกะตัวแปรที่ทำไว้ในCode ได้ทั้งหมด
รวมทั้งยังเจอปัญหา การนำค่าไปใช้ เมื่อมีการตารางชุดอื่นในฟอร์มเดียวกัน
ท่านใดมีคำแนะนำรบกวนด้วยครับ
|
| |
|
|
| |
| Date :
2012-07-10 22:58:12 |
By :
q12 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
พยายามอีกนิด เกือบจะได้แล้วครับ 
|
| |
|
|
| |
| Date :
2012-07-11 06:28:03 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไล่ดูมาเป็นสิบรอบแล้ว ยังหาไม่เจอครับ
ค้นหาได้ แต่ไม่รับคำสั่ง เพิ่มแถว
รบกวนด้วยครับ ขอพักไปแก้โจทย์อื่นก่อน
Code (PHP)
<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<?
mysql_connect("localhost","root","");
mysql_select_db("test");
$strSQL = "SELECT * FROM customer";
$objQuery = mysql_query($strSQL);
?>
<script language="javascript">
$(document).ready(function(){
$('input[name*="txtCustomerID"]').change("change", function (){
var currentIndex = $(this).closest("tr")[0].rowIndex;
$.ajax({
url: "returnCustomer3.php" ,
type: "POST",
data: 'sCusID=' +$("#txtCustomerID"+currentIndex).val()
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj == '')
{
$("#txtCustomerID"+currentIndex).val('');
$("#txtName"+currentIndex).val('');
$("#txtEmail"+currentIndex).val('');
$("#txtCountryCode"+currentIndex).val('');
$("#txtBudget"+currentIndex).val('');
$("#txtUsed"+currentIndex).val('');
}
else
{
$.each(obj, function(key, inval) {
$("#txtCustomerID"+currentIndex).val(inval["CustomerID"]);
$("#txtName"+currentIndex).val(inval["Name"]);
$("#txtEmail"+currentIndex).val(inval["Email"]);
$("#txtCountryCode"+currentIndex).val(inval["CountryCode"]);
$("#txtBudget"+currentIndex).val(inval["Budget"]);
$("#txtUsed"+currentIndex).val(inval["Used"]);
});
}
});
});
});
function CreateSelectOption(ele)
{
var objSelect = document.getElementById(ele);
var Item = new Option("", "");
objSelect.options[objSelect.length] = Item;
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
var Item = new Option("<?=$objResult["Name"];?>", "<?=$objResult["CustomerID"];?>");
objSelect.options[objSelect.length] = Item;
<?
}
?>
}
function CreateNewRow()
{
var intLine = parseInt(document.frmMain.hdnMaxLine.value);
intLine++;
var theTable = document.all.tbExp
var newRow = theTable.insertRow(theTable.rows.length)
newRow.id = newRow.uniqueID
var newCell
//*** Column 1 ***//
newCell = newRow.insertCell(0);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"+intLine+"\" ID=\"Column1_"+intLine+"\" VALUE=\"\"></center>";
//*** Column 2 ***//
newCell = newRow.insertCell(1);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"+intLine+"\" ID=\"Column2_"+intLine+"\" VALUE=\"\"></center>";
//*** Column 3 ***//
newCell = newRow.insertCell(2);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"+intLine+"\" ID=\"Column3_"+intLine+"\" VALUE=\"\"></center>";
//*** Column 4 ***//
newCell = newRow.insertCell(3);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\" ID=\"Column4_"+intLine+"\" VALUE=\"\"></center>";
//*** Column 5 ***//
newCell = newRow.insertCell(4);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";
//*** Create Option ***//
CreateSelectOption("Column5_"+intLine)
document.frmMain.hdnMaxLine.value = intLine;
}
function RemoveRow()
{
intLine = parseInt(document.frmMain.hdnMaxLine.value);
if(parseInt(intLine) > 0)
{
theTable = document.getElementById("tbExp");
theTableBody = theTable.tBodies[0];
theTableBody.deleteRow(intLine);
intLine--;
document.frmMain.hdnMaxLine.value = intLine;
}
}
function GenerateRow()
{
var intRows = parseInt(document.frmMain.txtCount.value);
for(i=0;i<intRows;i++)
{
CreateNewRow();
}
}
</script>
<body>
<form action="phpMySQLAddSave.php" name="frmAdd" method="post">
<table name = "searchtable" width="600" border="0">
<tr>
<td><div align="center">No </div></td>
<td><div align="center">CustomerID </div></td>
<td><div align="center">Name </div></td>
<td><div align="center">Email </div></td>
<td><div align="center">Country Code </div></td>
<td><div align="center">Budget </div></td>
</tr>
<?
for($i=1;$i<=10;$i++)
{
?>
<tr>
<td><div align="center"><input type="text" name="txtCustomerID<?=$i;?>" id="txtCustomerID<?=$i;?>" size="5"></div></td>
<td><input type="text" name="txtName<?=$i;?>" id="txtName<?=$i;?>" size="20"></td>
<td><input type="text" name="txtEmail<?=$i;?>" id="txtEmail<?=$i;?>" size="25"></td>
<td><div align="center"><input type="text" name="txtCountryCode<?=$i;?>" id="txtCountryCode<?=$i;?>" size="2"></div></td>
<td align="right"><input type="text" name="txtBudget<?=$i;?>" id="txtBudget<?=$i;?>" size="5"></td>
<td align="right"><input type="text" name="txtUsed<?=$i;?>" id="txtUsed<?=$i;?>" size="5"></td>
</tr>
<?
}
?>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input type="text" name="txtCount" value="1" size="5"><input name="btnCreate" type="button" id="btnCreate" value="+" onClick="GenerateRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
</form>
</body>
</html>
|
| |
|
|
| |
| Date :
2012-07-11 11:50:19 |
By :
q12 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
