JavaScript createElement Select and Get item from MySql Database
JavaScript createElement Select and Get item from MySql Database เป็นตัวอย่างการ JavaScript กับ createElement หรือการสร้าง element จาก MySQL Database ที่เป็น DropDownList/ListMenu และมีการสร้าง Item จาก MySQL Database ให้กับ DropDownList/ListMenu
Code
CREATE TABLE `country` (
`CountryCode` varchar(2) NOT NULL,
`CountryName` varchar(30) NOT NULL,
PRIMARY KEY (`CountryCode`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Dumping data for table `country`
--
INSERT INTO `country` VALUES ('TH', 'Thailand ');
INSERT INTO `country` VALUES ('EN', 'English');
INSERT INTO `country` VALUES ('US', 'United states');
create_element_select_mysql.php
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<?
mysql_connect("localhost","root","root");
mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM country";
$objQuery = mysql_query($strSQL);
?>
<script language="javascript">
function fncCreateSelectOption(ele)
{
var objSelect = ele;
var Item = new Option("", "");
objSelect.options[objSelect.length] = Item;
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
var Item = new Option("<?php echo $objResult["CountryName"];?>", "<?php echo $objResult["CountryCode"];?>");
objSelect.options[objSelect.length] = Item;
<?
}
?>
}
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
myLine.value++;
// Create input text
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txtGalleryName"+myLine.value);
myElement1.setAttribute('id',"txt"+myLine.value);
mySpan.appendChild(myElement1);
// Create input file
var myElement2 = document.createElement('input');
myElement2.setAttribute('type',"file");
myElement2.setAttribute('name',"fileUpload"+myLine.value);
myElement2.setAttribute('id',"fil"+myLine.value);
mySpan.appendChild(myElement2);
// Create select
var myElement3 = document.createElement('select');
myElement3.setAttribute('name',"selSelect"+myLine.value);
myElement3.setAttribute('id',"sel"+myLine.value);
mySpan.appendChild(myElement3);
// Create Option //
fncCreateSelectOption(myElement3)
// Create <br>
var myElement4 = document.createElement('br');
myElement4.setAttribute('name',"br"+myLine.value);
myElement4.setAttribute('id',"br"+myLine.value);
mySpan.appendChild(myElement4);
}
function fncDeleteElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
if(myLine.value >= 1)
{
// Remove input text
var deleteFile = document.getElementById("txt"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove input file
var deleteFile = document.getElementById("fil"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove select
var deleteFile = document.getElementById("sel"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove <br>
var deleteBr = document.getElementById("br"+myLine.value);
mySpan.removeChild(deleteBr);
myLine.value--;
}
}
</script>
<body Onload="JavaScript:fncCreateElement()">
<form action="webpage.php" method="post" name="frmMain" enctype="multipart/form-data">
<input name="btnCreate" type="button" value="+" onClick="JavaScript:fncCreateElement();">
<input name="btnDelete" type="button" value="-" onClick="JavaScript:fncDeleteElement();"><br>
<div id="mySpan"></div>
<input name="hdnLine" id="hdnLine" type="hidden" value="0">
<input name="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 04
