I have this this set of textbox and dropdowns with autocomplete. Now i want to give an add button, when i click on add button, i shouuld get all these should repeat i mean 2 dropdown and 2 textboxes. I am able to do it with only textboxes, but for this i am not able to do it.
Here is my code
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#color" ).autocomplete({
source: 'search.php'
});
});
</script>
<script>
$(function() {
$( "#size" ).autocomplete({
source: 'search1.php'
});
});
</script>
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="ui-widget">
<label for="color">Item Color: </label>
<input id="color" name="color" type="text">
</div>
<div class="ui-widget">
<label for="size">Item Size: </label>
<input id="size"name="size" type="text">
</div>
<div><input type="text" name="cost_price" /></div>
<div><input type="text" name="selling_price" /></div>
</div>
</div>
search.php
<?php
//database configuration
$dbHost = 'localhost';
$dbUsername = 'xxxx';
$dbPassword = 'xxxx';
$dbName = 'xxxx';
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
$searchTerm = $_GET['term'];
$query = $db->query("SELECT * FROM leads WHERE company LIKE '".$searchTerm."%' ORDER BY company ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['company'];
}
echo json_encode($data);
?>
It should happen like this http://jsfiddle.net/niklasvh/BT2BE/
***** UPDATED ****** I am able to do it like this
echo '<form method="post" action="' . htmlspecialchars($_SERVER['PHP_SELF'],ENT_QUOTES,'UTF-8') . '" >';
echo '<div>';
echo '<input type="hidden" name="FormID" value="' . $_SESSION['FormID'] . '" />';
echo '<br />'; ?>
<p>
<input type="button" value="Add Attributes" onClick="addRow('dataTable')" />
<input type="button" value="Remove Attributes" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="selection">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label for="Color">Select Color</label>
<select id="Color" name="Color[]" required="required">
<?php $sql = "SELECT * FROM itemcolor";
$result = DB_query($sql,$db);
while($myrow = DB_fetch_array($result))
{ ?>
<option value="<?php echo $myrow['color_id']; ?>"><?php echo $myrow['color']; ?></option>
<?php } ?>
</select>
</td>
<td>
<label for="Size">Select Size</label>
<select id="Size" name="Size[]" required="required">
<?php $sql = "SELECT * FROM itemsizes";
$result = DB_query($sql,$db);
while($myrow = DB_fetch_array($result))
{ ?>
<option value="<?php echo $myrow['size_id']; ?>"><?php echo $myrow['size']; ?></option>
<?php } ?>
</select>
</td>
<td>
<label>Cost Price</label>
<input type="text" required="required" name="Cost[]">
</td>
<td>
<label for="Sale">Selling Price</label>
<input type="text" required="required" name="Selling_price[]">
</td>
<input type="hidden" name="stockid" value="<?php echo $stockID; ?>" />
<td>
<label for="Stock">Opening Stock</label>
<input type="text" required="required" name="Opening_stock[]">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
<?php
echo '<br /><div class="centre"><input type="submit" name="submit" value="' . _('Accept') . '" /><input type="submit" name="Cancel" value="' . _('Cancel') . '" /></div>';
echo '</div>
</form>';
if(isset($_POST['submit']))
{
$stk = $_POST['stockid'];
foreach ($_POST['chk'] as $k) {
$color = $_POST['Color'][$k];
$size = $_POST['Size'][$k];
$cost = $_POST['Cost'][$k];
$selling_price = $_POST['Selling_price'][$k];
$opening_stock = $_POST['Opening_stock'][$k];
$sql1 = "INSERT INTO itemarticles (stk_code, color, size, cost, selling_price, opening_stock) VALUES ('".$stk."', ".$color.", ".$size.", ".$cost.", ".$selling_price.", ".$opening_stock.")";
$result = DB_query($sql1,$db);
if($result)
{
header("location:StockAttributes.php?Success=1");
}
}
}
in Script
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 30){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum Attributes per Item is 30.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Attributes.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
But i am not able to add the counter for each entry ... something like this <input type="text" required="required" name="Opening_stock[$counter]">
I am not getting where to add the counter.
