We Keep Coding

oninput event in html works fine till <form></form> is added?

I am adding rows in table and deleting, this works fine. using oninput="" event i am also able to calculate the total cost by calling javascript function.
Now, the moment i add <form></form>, neither am able to add rows nor moving any forward. I am new to javascript, and have no clue what is going on. please help somebody.
<div class="container">
<p>Add and Delete Items with Total Cost Value</p>
<form>
<div id="tableDiv">
<table id="myTableHead">
<tr>
<th>Item Name</th>
<th>Item Cost</th>
</tr>
<tr>
<td><input type="text" name="ItemName[]" id="ItemName" /></td>
<td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
</tr>
</table>
<table id="myTable">
</table>
<table id="myTableTot">
<tr>
<td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
<td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
</tr>
</table>
</div>
<br>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
</form>
</div>
<script>
function myCreateFunction() {
var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
if (TotalCostValueCurrent <= 25000) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />';
} else {
window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
}
}
function myTotalFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var i = 0;
var itemCostSum = 0;
while (i <= arrLen && itemCostSum <= 25000) {
if (itemCostSum <= 25000) {
itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
i++;
document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
}
}
}
function myDeleteFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
var itemCostFinal = 0;
itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);
//FINAL OUTPUT
document.getElementById("myTable").deleteRow(-1); // Delete Last Row
document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
}
</script>

Inside the form tags buttons tend to do the default action which is submit.
So change your button from,
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
to
<input type="button" onclick="myCreateFunction()" value="Create row">
<input type="button" onclick="myDeleteFunction()" value ="Delete row">

You have to add Input tag instead of button tag. Because button tag in form specifies default submit event on-click so your form submitted when you add any row and also refresh.
<div class="container">
<p>Add and Delete Items with Total Cost Value</p>
<form>
<div id="tableDiv">
<table id="myTableHead">
<tr>
<th>Item Name</th>
<th>Item Cost</th>
</tr>
<tr>
<td><input type="text" name="ItemName[]" id="ItemName" /></td>
<td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
</tr>
</table>
<table id="myTable">
</table>
<table id="myTableTot">
<tr>
<td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
<td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
</tr>
</table>
</div>
<br>
<input type="button" onclick="myCreateFunction()" value="Create row" />
<input type="button" onclick="myDeleteFunction()" value="Delete row" />
</form>
</div>
<script>
function myCreateFunction() {
var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
if (TotalCostValueCurrent <= 25000) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />';
} else {
window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
}
}
function myTotalFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var i = 0;
var itemCostSum = 0;
while (i < arrLen && itemCostSum <= 25000) {
if (itemCostSum <= 25000) {
itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
i++;
document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
}
}
}
function myDeleteFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
var itemCostFinal = 0;
itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);
//FINAL OUTPUT
document.getElementById("myTable").deleteRow(-1); // Delete Last Row
document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
}
</script>

How to insert particular cell values of HTML table in TextBoxes using JavaScript?

I have a HTML form. The save and delete button are working fine. But I want to write JavaScript (not jQuery or AngularJS) code of edit and update button. When I click the edit the data of particular row should be displayed in the textboxes and when I press update button the updated data of that particular row should get submitted in the HTML table.
function addRow() {
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= id.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= email.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
}

Add Function will look like this..
function addRow() {
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var id = document.getElementById("id");
var name = document.getElementById("name");
var gender = document.getElementById("gender");
var address = document.getElementById("address");
var email = document.getElementById("email");
var cell1 = row.insertCell(0);
cell1.innerHTML=id.value;
var cell2 = row.insertCell(1);
cell2.innerHTML = name.value;
var cell3 = row.insertCell(2);
cell3.innerHTML = gender.value;
var cell4 = row.insertCell(3);
cell4.innerHTML = address.value;
var cell5 = row.insertCell(4);
cell5.innerHTML = email.value;
var cell6 = row.insertCell(5);
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">";
cell6.innerHTML = strHtml5;
}
</script>

I copied your code and executed in my machine and found minor errors as well as big mistake you did by not using form tag and created the form.
After reverse engineering I appended your code and made it fully functional as well as simple to understand.
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> -->
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action=""> <!-- ###Form tag is not used -->
<table>
<tr>
<td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity -->
<td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy -->
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Gender:</td> <!-- ### imstead of select option you must use radio button -->
<td> <input type="radio" id="gender" value="male" /> Male <br>
<input type="radio" id="gender" value="Female" /> FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field-->
</tr>
<tr>
<td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email -->
<td><input type="email" id="mail" name="Email"></td>
</tr>
<!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]-->
<tr>
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
<td><input type="reset" value="Reset" /> </td>
<td><input type="button" id="update" value="Update" onClick=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Gender</b></td>
<td><b>Address</b></td>
<td><b>Email</b></td>
<td><b>Action</b></td>
</tr>
</table>
</div>
<!-- ============ JavaScript ========== -->
<script>
function addRow() {
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= empId.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= mail.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</body>
</html>

Dynamic generated textboxs values sum

How sum of all dynamic generated text boxes?
This is my JavaScript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var i=1; function addRow() {
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'items_' + i;
el.id = 'items_' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'stock_' + i;
el2.id = 'stock_' + i;
el2.class = 'stock' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'unit_rate_' + i;
el3.id = 'unit_rate_' + i; el3.class = 'unit_rate' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var fourthCell = row.insertCell(3);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'per_item_' + i;
el4.id = 'per_item_' + i; el3.class = 'per_item' + i;
el4.size = 20;
el4.maxlength = 20;
fourthCell.appendChild(el4);
// alert(i);
i++;
frm.h.value=i; // alert(i);
}//AUTO GNERATE INPUTBOX PRANTHESE var a=1; $().ready(function () {
$(".stock, .unit_rate" ).on("change", function () {
$(".unit_rate, .stock").each(function(){ var totalcost = parseFloat($(".unit_rate").val()) / parseFloat($(".stock").val()) ; $(".per_item").val(totalcost); });
});
});
</script>
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title></head>
<body>
<form action="stocksubmit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1"> <tr>
<td><strong>ITEMS</strong></td>
<td><strong>STOCK</strong> </td>
<td><strong>UNIT RATE</strong> </td>
<td><strong>PER ITEM</strong> </td> </tr> <tr>
<td><input name="items_0" type="text" id="items_0" size="20" class="item" maxlength="20" /></td>
<td><input name="stock_0" type="text" id="stock_0" size="20" class="stock" maxlength="20" /></td>
<td><input name="unit_rate_0" type="text" id="unit_rate_0" class="unit_rate" size="20" maxlength="12" /></td>
<td><input name="per_item_0" type="text" id="per_item_0" class="per_item" size="20" maxlength="12" /></td>
</tr>
</table> <input type="button" value="Add" onclick="addRow();" /> <input name="submit" type="submit" value="submit" /> <label> <input name="h" type="hidden" id="h" value="0" /> </label>
</form> </body> </html>

Is this what you want??
$('#addbutt').click(function() {
$(":text").each(function(){
test_asd += parseInt($(this).val());
});
alert(test_asd);
});
edit:
Link to prove this works with dynamically added elements using drag and clone

Increment my input text id when table row is cloned using Javascript

I am having a table it contains only one row. Row has a lot of elements like textboxs and buttons. When I click the button the table row will be cloned using append() function. My problem is when I click the button I want to increment the textbox and button id. How can I do this?
Example HTML:
<tr id="items:1">
<td id="id">
<input type="text" id="price:1" name="price" value="" size="6" readonly="readonly" />
</td>
<td id="id">
<input type="text" id="quantity:1" name="quantity" size="10" align="middle" onblur="totalprice(this)" />
</td>
<td id="id">
<input type="text" id="total:1" name="total" size="10" value="0" readonly="readonly" align="middle" />
</td>
<td id="id">
<input type="button" onclick="cloneRow()" id="button:1" value="ADD" />
</td>
</tr>
Example JavaScript:
function cloneRow() {
var row = document.getElementById("items:1");
var table = document.getElementById("particulars");
var clone = row.cloneNode(true);
var rowId = "items:" + a.toString();
clone.id = rowId;
var tabledataid = document.getElementById("id");
var inputtext = tabledataid.getElementsByTagName("input");
var inputtextid = inputtext[a];
var changeInputTextid = "price:" + b.toString();
inputtextid.id = changeInputTextid;
alert(changeInputTextid);
table.appendChild(clone);
a++;
}

A fiddle
Create a function to add rows and just use the indexes of text boxes and columns correctly
function insertRow() {
var x = document.getElementById('ttable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
x.appendChild(new_row);
}

How to add dynamic rows in html table?

This is my first post and I am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.
Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, that's why please help me in this regards as i know there are so many good developers in php in this forum.
Here is my code for you:
<script type="text/javascript">
function setFocus(){
document.getElementById("searchitem").focus();
}
function change()
{
var searchitem = document.getElementById('searchitem');
if(searchitem.value == '')
{
searchitem.style.background = 'orange';
}
else
{
searchitem.style.background = '';
}
}
</script>
<?php $name = "Mehroz"; ?>
<SCRIPT language="javascript">
/* setInterval("SANAjax();",5000);
$(function(){
SANAjax = function(){
$('#dataDisplay').prepend("HI This").fadeIn("slow");
}
}) ; */
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = '<?php echo $name;?>';
element2.size = "15";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.size = "25";
element3.disabled = "disabled";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "3";
element4.disabled = "disabled";
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.size = "3";
element5.disabled = "disabled";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.size = "5";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.size = "5";
cell8.appendChild(element7);
var cell9 = row.insertCell(8);
var element8 = document.createElement("input");
element8.type = "text";
element8.size = "10";
cell9.appendChild(element8);
var cell10 = row.insertCell(9);
var element9 = document.createElement("input");
element9.type = "submit";
element9.value = "Update";
cell10.appendChild(element9);
}
function deleteRow(tableID) {
try {
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body onload="setFocus();change();">
<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table width="98%" id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" width="3%"></td>
<td align="center" width="5%">S#</td>
<td align="center" width="15%">Barcode</td>
<td align="center" width="27%">Item Name</td>
<td align="center" width="4%">Stock</td>
<td align="center" width="4%">Qty</td>
<td align="center" width="6%">Price</td>
<td align="center" width="6%">Disc.Rs.</td>
<!-- <td align="center" width="7%">Disc.%</td> -->
<td align="center" width="10%">Total</td>
<td align="center" width="23%"></td></tr>
<!-- <form action="javascript:addRow('dataTable')" method="POST">
<INPUT type="text" name="add" value=""/>
<INPUT type="submit" value="Add Row" name="search" />
</form> -->
<TR>
<TD><INPUT type="checkbox" name="chk" /></TD>
<TD> 1 </TD>
<TD> <INPUT type="textbox" size="15" /> </TD>
<TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="10" /> </TD>
<TD> <INPUT type="submit" value="Update" /> </TD>
</TR>
</form>
</table>
</div>

Long story short, this is the code ( if I understood correctly what you are trying to achive ):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#searchitem").focus().filter('input[value!=""]').addClass("orange");
});
</script>
<style type="text/css">
.orange
{
background-color: orange;
}
table#dataTable
{
empty-cells : show;
}
table#dataTable th
{
text-align : center;
background-color: #97C950;
}
.saved
{
background-color: green;
}
</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
<input id="searchitem" type="text" size="75" value="" >
<input type="submit" name="search" value="New Item" >
<input id="deleteRow" type="button" value="Delete Row" >
</form>
<table style="width:98%;" id="dataTable">
<tr>
<th colspan="2" style="width:5%;">S#</th>
<th style="width:15%;">Barcode</th>
<th style="width:27%;">Item Name</th>
<th style="width:4%;">Stock</th>
<th style="width:4%;">Qty</th>
<th style="width:6%;">Price</th>
<th style="width:6%;">Disc.Rs.</th>
<th style="width:10%;">Total</th>
</tr>
</table>
<script type="text/javascript">
$('#searchitem').change(function()
{
var t = $('#dataTable');
t.append('<tr> \
<td><input type="checkbox"></td> \
<td>'+t.find('tr').length+'</td> \
<td><input size="15" type="text" value="'+$(this).val()+'"></td> \
<td><input size="25" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="5" type="text" value=""></td> \
<td><input size="10" type="text" value=""></td> \
<td><input size="15" type="text" value=""></td> \
<td><input type="button" value="Update" onClick="saveItem(event);"></td> \
</tr>');
});
function saveItem(ev)
{
// here read all rows from that row, send them via AJAX to the server to be saved
// you get the current row by looking at ev.currentTarget, something like this in Firefox
var args = [];
$(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push( $(this).val() ); });
$.post(
'saveItem.php',
args,
function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */
);
}
</script>
</body>
</html>
This is the long story:
you need to insert a new row in the table when you type something in input#searchitem
you don't save it in the database yet, first you insert the other columns (quantity, price etc ...)
them you hit the update button, the new row is inserted in the database and if everithing is OK the button will be colored "green"
This code is to give you a clue and to push you in the right direction (it's like a proof of concept), so here are more recomandations (hard to give beacause I still didn't understod exactly what are you trying to achive):
GLOBAL:
don't just copy/paste this code, try to undertand it, and change it for your own needs
CSS:
use external style sheet
set fixed columns width for the table
Javascript:
check if the bar code exists, highlight the row, and push it in to the visible area if is not visible (or show a box with " there are 5 more hidden rows), you can give names for the inputs like name=barcode ...
use those names in the args array to create a named array.
Hope this will help you.