<?php
// Connect to the DB
$link = mysqli_connect("localhost","root","0109")
or die("Cannot connect to MySQL : ".mysqli_error());
mysqli_select_db($link,"mydb_egat")
or die("Cannot select Database : ".mysqli_error());
mysqli_set_charset($link, "utf8");
// store in the DB
if(!empty($_POST['ok'])) {
// first delete the records marked for deletion. Why? Because we don't want to process them in the code below
if( !empty($_POST['delete_ids']) and is_array($_POST['delete_ids'])) {
// you can optimize below into a single query, but let's keep it simple and clear for now:
foreach($_POST['delete_ids'] as $id) {
$sql = "DELETE FROM products WHERE id=$id";
$link->query($sql);
}
}
// now, to edit the existing data, we have to select all the records in a variable.
$sql="SELECT * FROM products ORDER BY id";
$result = $link->query($sql);
// now edit them
while($product = mysqli_fetch_array($result)) {
// remember how we constructed the field names above? This was with the idea to access the values easy now
$sql = "UPDATE products SET name='".$_POST['name'.$product['id']]."'
WHERE id='$product[id]'";
$link->query($sql);
}
// (feel free to optimize this so query is executed only when a product is actually changed)
// adding new products
if(!empty($_POST['name'])) {
foreach($_POST['name'] as $cnt => $name) {
$sql = "INSERT INTO products (name) VALUES ('".$_POST['name'][$cnt]."');";
$link->query($sql);
}
}
}
// select existing products here
$sql="SELECT * FROM products ORDER BY id";
$result = $link->query($sql);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<head>
<title>Simple example of dynamically adding rows with jQuery</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div align="center" style="width:100%;margin:auto;">
<?
include("connect.php");
$query = "select * from tb_name";
$data = mysql_query($query); //query ข้อมูล
while($show = mysql_fetch_array($data)){
echo "<h3>".$show[1]."</h3> "; //โชว์ข้อมูล
}
?>
<form method="post">
<div id="itemRows">
<input name="add_name" type="hidden" />
<?php
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">Name: <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" />
<input type="checkbox" name="delete_ids[]" value="<?=$product['id']?>"> ต้องการลบ</p>
<?php endwhile;?>
</div>
<input onClick="addRow(this.form);" type="button" value="Add row" />
<input type="submit" name="ok" value="Save Data">
<!--<button><a href="3.php" style="text-decoration : none;">Next</a></button>-->
</form>
<form action="3.php" method="post">
<input type="submit" value="Next">
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</body>
</html>
<?php
// Connect to the DB
$link = mysqli_connect("localhost","root","0109")
or die("Cannot connect to MySQL : ".mysqli_error());
mysqli_select_db($link,"mydb_egat")
or die("Cannot select Database : ".mysqli_error());
mysqli_set_charset($link, "utf8");
// store in the DB
if(!empty($_POST['ok'])) {
// first delete the records marked for deletion. Why? Because we don't want to process them in the code below
if( !empty($_POST['delete_ids']) and is_array($_POST['delete_ids'])) {
// you can optimize below into a single query, but let's keep it simple and clear for now:
foreach($_POST['delete_ids'] as $id) {
$sql = "DELETE FROM products WHERE id=$id";
$link->query($sql);
}
}
// now, to edit the existing data, we have to select all the records in a variable.
$sql="SELECT * FROM products ORDER BY id";
$result = $link->query($sql);
// now edit them
while($product = mysqli_fetch_array($result)) {
// remember how we constructed the field names above? This was with the idea to access the values easy now
$sql = "UPDATE products SET name='".$_POST['name'.$product['id']]."'
WHERE id='$product[id]'";
$link->query($sql);
}
// (feel free to optimize this so query is executed only when a product is actually changed)
// adding new products
if(!empty($_POST['name'])) {
foreach($_POST['name'] as $cnt => $name) {
$sql = "INSERT INTO products (name) VALUES ('".$_POST['name'][$cnt]."');";
$link->query($sql);
}
}
}
// select existing products here
$sql="SELECT * FROM products ORDER BY id";
$result = $link->query($sql);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<head>
<title>Simple example of dynamically adding rows with jQuery</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div align="center" style="width:100%;margin:auto;">
<?
include("connect.php");
$query = "select * from tb_name";
$data = mysql_query($query); //query ข้อมูล
while($show = mysql_fetch_array($data)){
echo "<h3>".$show[1]."</h3> "; //โชว์ข้อมูล
}
?>
<form method="post">
<div id="itemRows">
<input name="add_name" type="hidden" />
<?php
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">Name: <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" />
<input type="checkbox" name="delete_ids[]" value="<?=$product['id']?>"> ต้องการลบ</p>
<?php endwhile;?>
</div>
<input onClick="addRow(this.form);" type="button" value="Add row" />
<input type="submit" name="ok" value="Save Data">
<!--<button><a href="3.php" style="text-decoration : none;">Next</a></button>-->
</form>
<form action="3.php" method="post">
<input type="submit" value="Next">
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</body>
</html>