|
|
|
ช่วยเรื่อง autocomplete หน่อย ครับ กรณีผมใช้ createElement ในการสร้าง Rows จำนวนแถวของ Form |
|
|
|
|
|
|
|
อืมตัวนี้ยากหน่อยครับ แต่เห็นมี jQuery ทำได้น่ะครับ
|
|
|
|
|
Date :
2012-07-25 17:05:24 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ตามที่พี่วินบอกอะครับใช้ jQuery สามารถทำได้
|
|
|
|
|
Date :
2012-07-25 21:27:06 |
By :
Krungsri |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
แจ่มครับ เอามาแชร์ด้วยก็ดีครับ
|
|
|
|
|
Date :
2012-07-26 09:05:10 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Autocomplete
ของผมใช้ตัวอย่างที่ 2 นะครับ https://www.thaicreate.com/free-web-script/autocomplete-autosuggestion.html
onkeyup=\"ajax_showOptions(this,'getCountriesByLetters',event)\"
เพิ่ม ในช่อง textbox ที่ต้องการ Autocomplete
<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list.js"></script>
</head>
<?
mysql_connect("localhost","root","root");
mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM customer";
$objQuery = mysql_query($strSQL);
?>
<script language="javascript">
function CheckValidate()
{
for(i=1;i<=document.frmMain.hdnMaxLine.value;i++)
{
//*** Column 1 ***/
if(eval("document.frmMain.Column1_"+i+".value")=="")
{
alert('Please input Column 1 line.. ' + i);
eval("document.frmMain.Column1_"+i+".focus();")
return false;
}
//*** Column 2 ***/
if(eval("document.frmMain.Column2_"+i+".value")=="")
{
alert('Please input Column 2 line.. ' + i);
eval("document.frmMain.Column2_"+i+".focus();")
return false;
}
//*** Column 3 ***/
if(eval("document.frmMain.Column3_"+i+".value")=="")
{
alert('Please input Column 3 line.. ' + i);
eval("document.frmMain.Column3_"+i+".focus();")
return false;
}
//*** Column 4 ***/
if(eval("document.frmMain.Column4_"+i+".value")=="")
{
alert('Please input Column 4 line.. ' + i);
eval("document.frmMain.Column4_"+i+".focus();")
return false;
}
//*** Column 5 ***/
if(eval("document.frmMain.Column5_"+i+".value")=="")
{
alert('Please input Column 5 line.. ' + i);
eval("document.frmMain.Column5_"+i+".focus();")
return false;
}
}
}
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.getElementById("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=\"\" onkeyup=\"ajax_showOptions(this,'getCountriesByLetters',event)\"></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;
}
}
</script>
<body Onload="CreateNewRow();CreateNewRow();">
<form name="frmMain" method="post" action="Submit.php" OnSubmit="return CheckValidate();">
<table width="445" border="1" id="tbExp">
<tr>
<td><div align="center">Column 1 </div></td>
<td><div align="center">Column 2 </div></td>
<td><div align="center">Column 3 </div></td>
<td><div align="center">Column 4 </div></td>
<td><div align="center">Column 5 </div></td>
</tr>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
<br>
<br>
<br>
<input name="btnSubmit" type="submit" id="btnSubmit" value="Submit">
</form>
</body>
</html>
อยากให้พี่วินเสริมหน่อยนะครับ กรณี ต้องการดึงค่า 2ค่ามาอะคับ ตอนนี้ได้แค่ค่าเดียวอยู่คับ
|
|
|
|
|
Date :
2012-07-26 11:06:48 |
By :
pumin99 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เยี่ยมครับ ถ้าอยากส่ง 2 ค่าก็ส่งค่ามาติดกัน แล้วค่อยมาตัดเอาก็ได้ครับ หรือไม่ก็ไปใช้พวก jQuery กับ Json ครับ
|
|
|
|
|
Date :
2012-07-26 21:39:50 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมลองทำตามแล้วครับแต่อยากให้เก็บค่าเป็น ID แทนต้องทำอย่างไรเหรอครับท่าน
|
|
|
|
|
Date :
2012-10-31 10:36:18 |
By :
batigole |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 00
|