JavaScript Send Checkbox Data from Popup to Main form |
JavaScript Send Checkbox Data from Popup to Main form เป็นตัวอย่างการ JavaScript กับ Popup (Checkbox) ในการส่งค่าจาก Popup ที่เลือกค่าจาก Checkbox มายัง Form หลัก หรือ Main Form
checkbox_popup_data1.html
<html>
<head>
<title>ThaiCreate.Com</title>
</head>
<body>
<script language="JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features).focus();
}
</script>
<form name="frmMain" action="" method="post">
<input type="text" name="txtSel" id="txtSel">
<input name="btnSelect" type="button" id="btnSelect" value="popup"
onClick="javascript:MM_openBrWindow('checkbox_popup_data2.html','pop', 'scrollbars=no,width=350,height=210')">
</form>
</body>
</html>
checkbox_popup_data2.html
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script language="javascript">
function selValue()
{
var val = '';
for(i=1;i<=frmPopup.hdnLine.value;i++)
{
if(eval("frmPopup.Chk"+i+".checked")==true)
{
val = val + eval("frmPopup.Chk"+i+".value") + ',';
}
}
window.opener.document.getElementById("txtSel").value = val;
window.close();
}
</script>
<form action="" method="post" name="frmPopup" id="frmPopup">
<table width="185" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="64"><input name="Chk1" type="checkbox" id="Chk1" value="A"></td>
<td width="115">A</td>
</tr>
<tr>
<td><input name="Chk2" type="checkbox" id="Chk2" value="B"></td>
<td>B</td>
</tr>
<tr>
<td><input name="Chk3" type="checkbox" id="Chk3" value="C"></td>
<td>C</td>
</tr>
<tr>
<td><input name="Chk4" type="checkbox" id="Chk4" value="D"></td>
<td>E</td>
</tr>
<tr>
<td><input name="Chk5" type="checkbox" id="Chk5" value="E"></td>
<td>D</td>
</tr>
</table>
<input name="hdnLine" type="hidden" value="5">
<br>
<input name="btnSelect" type="button" value="Select" onClick="JavaScript:selValue();">
</form>
</body>
</html>
Screenshot
ตัวอย่างที่ 2 กรณีเขียนร่วม php กับ MySQL
Code
CREATE TABLE `customer` (
`CustomerID` varchar(4) NOT NULL,
`Name` varchar(50) NOT NULL,
`Email` varchar(50) NOT NULL,
`CountryCode` varchar(2) NOT NULL,
`Budget` double NOT NULL,
`Used` double NOT NULL,
PRIMARY KEY (`CustomerID`),
FULLTEXT KEY `Name` (`Name`,`Email`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Dumping data for table `customer`
--
INSERT INTO `customer` VALUES ('C001', 'Win Weerachai', '[email protected]', 'TH', 1000000, 600000);
INSERT INTO `customer` VALUES ('C002', 'John Smith', '[email protected]', 'EN', 2000000, 800000);
INSERT INTO `customer` VALUES ('C003', 'Jame Born', '[email protected]', 'US', 3000000, 600000);
INSERT INTO `customer` VALUES ('C004', 'Chalee Angel', '[email protected]', 'US', 4000000, 100000);
checkbox_popup_data1.php
<html>
<head>
<title>ThaiCreate.Com</title>
</head>
<body>
<script language="JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features).focus();
}
</script>
<form name="frmMain" action="" method="post">
<input type="text" name="txtSel" id="txtSel">
<input name="btnSelect" type="button" id="btnSelect" value="popup"
onClick="javascript:MM_openBrWindow('checkbox_popup_data2.php','pop', 'scrollbars=no,width=350,height=210')">
</form>
</body>
</html>
checkbox_popup_data2.php
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script language="javascript">
function selValue()
{
var val = '';
for(i=1;i<=frmPopup.hdnLine.value;i++)
{
if(eval("frmPopup.Chk"+i+".checked")==true)
{
val = val + eval("frmPopup.Chk"+i+".value") + ',';
}
}
window.opener.document.getElementById("txtSel").value = val;
window.close();
}
</script>
<form id="frmPopup" action="" method="post" name="frmPopup">
<?
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM customer";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="318" border="1">
<tr>
<th width="87"> <div align="center">CustomerID </div></th>
<th width="152"> <div align="center">Name </div></th>
<th width="57"> <div align="center">Select </div></th>
</tr>
<?
$i = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$i++;
?>
<tr>
<td><div align="center"><?php echo $objResult["CustomerID"];?></div></td>
<td><?php echo $objResult["Name"];?></td>
<td align="center"><input name="Chk<?php echo $i;?>" id="Chk<?php echo $i;?>" type="checkbox" value="<?php echo $objResult["CustomerID"];?>"></td>
</tr>
<?
}
?>
</table>
<input name="hdnLine" type="hidden" value="<?php echo $i;?>">
<br>
<input name="btnSelect" type="button" value="Select" onClick="JavaScript:selValue();">
</form>
<?
mysql_close($objConnect);
?>
</body>
</html>
Screenshot
จากตัวอย่างจะได้ค่ากลับมาที่ขั้นด้วยเครื่องหมาย , (comma) ซึ่งสามารถใช้ function explode() ของ php ในการตัดเพื่อเอาไปใช้ได้เลย
Go to : PHP explode()
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 04
