<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>New Product</title>
<link rel="stylesheet" href="css/style.css">
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " Flavors");
}
else {
// Find a <table> element with id="flavortable":
var table = document.getElementById("flavortable");
// Create an empty <tr> element and add it to the 1st position of the table:
var lastRowIndex = table.rows.length-1;
var row = table.insertRow(lastRowIndex);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Add some text to the new cells:
cell1.innerHTML = "<input type='text' name='flavor[]'>";
cell2.innerHTML = "<input type='text' name='barcode[]'>";
counter++;
}
}
</script>
<script>
var counter2 = 1;
var limit2 = 10;
function addInput2(divName){
if (counter2 == limit2) {
alert("You have reached the limit of adding " + counter2 + " packings");
}
else {
// Find a <table> element with id="myTable":
var table = document.getElementById("packingtable");
// Create an empty <tr> element and add it to the 1st position of the table:
var lastRowIndex = table.rows.length-1;
var row = table.insertRow(lastRowIndex);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
// Add some text to the new cells:
cell1.innerHTML = "<input type='text' name='packing[]'>";
cell2.innerHTML = "<input type='text' name='price[]' style='width: 80px;'>";
cell3.innerHTML = "<input type='text' name='boxwidth[]' style='width: 35px;'>";
cell4.innerHTML = "<input type='text' name='boxlength[]' style='width: 35px;'>";
cell5.innerHTML = "<input type='text' name='boxheight[]' style='width: 35px;'>";
cell6.innerHTML = "<input type='text' name='boxsize[]' style='width: 40px;'>";
counter2++;
}
}
</script>
</head>
<body>
<form action="process-newproduct.php" method="post">
<table class="login_table">
<tr>
<td>Product Name [E] <span>*</span></td>
<td><input type="text" name="productname" placeholder="Product Name [Eng]" required></td>
</tr>
<tr>
<td>Product Name [T] <span></span></td>
<td><input type="text" name="productnameth" placeholder="Product Name [TH]"></td>
</tr>
<tr>
<td>Product Description <span></span></td>
<td><input type="text" name="productdesc" placeholder="Product Description"></td>
</tr>
<tr>
<td>Shelf life <span></span></td>
<td><input type="text" name="shelflife" placeholder="i.e 2 years"></td>
</tr>
<tr>
<td>Product Category <span>*</span></td>
<td><?
$objConnect = mysql_connect("localhost","root","abcd1234") or die("Error Connect to Database");
mysql_query("SET NAMES UTF8");
$objDB = mysql_select_db("thaimee");
$query = mysql_query("select * from categary;"); // Run your query
echo ' <select name="product_CategoryID">'; // Open your drop down box
// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['CategaryID'].'">'.$row['CategaryName'].'</option>';
}
echo '</select>';// Close your drop down box
?></td>
</tr>
<!-- For flavor -->
<table id="flavortable">
<tr>
<td>Flavor</td>
<td>Barcode</td>
</tr>
<tr>
<td><input type="text" name="flavor[]" placeholder="i.e Strawberry" ></td>
<td><input type="text" name="barcode[]" placeholder="i.e 8 853115 007783"></td>
</tr>
<tr>
<td><input type="button" class="button" value="Add another Flavor" onClick="addInput('flavortable');"></td>
</tr>
</table>
<!-- For packing -->
<table id="packingtable">
<tr>
<td>Packing </td>
<td>Price </td>
<td>W(cm) </td>
<td>L(cm) </td>
<td>H(cm) </td>
<td>BoxSize </td>
</tr>
<tr>
<td><input type="text" name="packing[]" placeholder="i.e 110 g x 60"></td>
<td><input type="text" name="price[]" placeholder="i.e 550" style="width: 80px;"></td>
<td><input type="text" name="boxwidth[]" placeholder="30" style="width: 35px;" ></td>
<td><input type="text" name="boxlength[]" placeholder="40" style="width: 35px;" ></td>
<td><input type="text" name="boxheight[]" placeholder="20" style="width: 35px;" ></td>
<td><input type="text" name="boxsize[]" style="width: 40px;" ></td>
</tr>
<tr>
<td><input type="button" class="button" value="Add another Packing" onClick="addInput2('packingtable');"></td>
</tr>
</table>
<tr>
<td><input type="submit" class="submitbutton" value="Save" ></td>
</tr>
</table>
</form>
</body>
</html>