|
 |
| |
การสร้าง Dynamic Textbox และ เราจะเอามาประยุกใช้กับ php Autocompleas |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iKATOB</title>
<SCRIPT TYPE="text/javascript">
var count = "1";
function addRow(in_tbl_name)
{
document.Frdt.hdnMaxLine.value = count;
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml1 = "<div style='width:50px; text-align:left'><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"rID_"+count+"\" ID=\"rID_"+count+"\" style=\"width:35px; text-align:center\" VALUE='"+count+"'></div>";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create table cell 2
var td2 = document.createElement("TD")
// var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"30\" value='in_"+count+"' >";
var strHtml2="<div style=' position:relative; padding-left:1px;width:400px; height:65px; text-align:left; font-size:12px; border:0px dotted #CCC '> <input type=\"text\" name=\"pvDesc_"+count+"\" id=\"pvDesc_"+count+"\" value=\"\" style=\"width:420px; text-align:left\" > <input name=\"pvCode_"+count+"\" type=\"text\" id=\"pvCode_"+count+"\" size=\"3\" value=\"\" /><div style='position:absolute; text-align:left;' id=\"Sub"+count+"\"></div></div>";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml3 = "<div style='position:relative; left:30px; width:30px; text-align:left'><INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"30\" STYLE=\"height:24;border: 1 solid;margin:0;\" value=\"\"></div>";
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"5\" STYLE=\"height:24;border: 1 solid;margin:0;\" READONLY>";
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
var td5 = document.createElement("TD")
if(count==1){
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" VALUE=\" \">";
}else {
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"-\">";
}
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
count = parseInt(document.Frdt.hdnMaxLine.value);
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
count--;
document.Frdt.hdnMaxLine.value = count;
}
</SCRIPT>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css" type="text/css"/>
</head>
<body onLoad="Javascript:addRow('tblPets');">
<form action=" " method="post" enctype="multipart/form-data" name="Frdt" id="Frdt">
<TABLE ID="tblPets" border="0">
<TR>
<TH> </TH><TH WIDTH="70"> </TH><TH WIDTH="230"> </TH><TH WIDTH="70"> </TH><TD ALIGN="center">
</TD></TR>
</TABLE>
<div style="position:relative; width:740px; padding:19px; text-align:center"><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></div>
<input type="text" name="pvDesc_3" id="pvDesc_3">
<input type="text" name="pvCode_3" id="pvCode_3" size="1">
<input type="hidden" name="hdnMaxLine" value="0">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
</form>
<script type="text/javascript">
function make_autocom(autoObj,showObj){
var mkAutoObj=autoObj;
var mkSerValObj=showObj;
new Autocomplete(mkAutoObj, function() {
this.setValue = function(id) {
document.getElementById(mkSerValObj).value = id;
}
if ( this.isModified )
this.setValue("");
if ( this.value.length < 1 && this.isNotClick )
return ;
return "gProduct.php?q=" +encodeURIComponent(this.value);
});
}
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("pvDesc_1","pvCode_1");
make_autocom("pvDesc_2","pvCode_2");
make_autocom("pvDesc_3","pvCode_3");
make_autocom("pvDesc_31","pvCode_3");
</script>
</body>
</html>
ส่วนที่ผมต้องการคือ เมือเรากดสร้าง อยากให้ช่องที่เรากำหนด สามารถใช้ Autocompete ได้ครับ
|
 |
 |
 |
 |
| Date :
2014-07-27 13:04:39 |
By :
ddsiam |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 00
|
