invoice_form.php

<!DOCTYPE html>
<html>
<head>
<title>invoice_form.php</title>
<script type="text/javascript">

function loadAllFields(i,elemType)
{
    var msg = document.getElementById("msg");
    var itemName = document.getElementById("itemName"+i);
    var itemCode = document.getElementById("itemCode"+i);
    var quantity = document.getElementById("quantity"+i);
    var price = document.getElementById("price"+i);
    var netAmount = document.getElementById("netAmount"+i);
    var items = [{n:'deto1', c:1, p:40},
        {n:'robin', c:2, p:90}];
    var found = false; // find item
    for (var j=0; j<items.length; j++) {
        if (elemType=='name' && itemName.value == items[j].n) {
            found = j;
        }
        if (elemType=='code' && itemCode.value == items[j].c) {
            found = j;
        }
    }
    //console.log(i, elemType, found, itemCode.value, items[0].c);
    if (found===false) {
        msg.innerHTML = "Product not found";
        /*if (elemType=='name')*/ itemCode.value = '';
        /*else if (elemType=='code')*/ itemName.value = '';
        quantity.value = "";
        price.value = "";
        netAmount.value = "";
        calcNetTotal();
    }
    else {
        msg.innerHTML = "Found";
        itemName.value = items[found].n;
        itemCode.value = items[found].c;
        price.value = items[found].p;
        if (quantity.value == '') { quantity.value = "1"; }
        calqtyprice(i);
    }
} // end of load id function

function calqtyprice(i) {
    var price = document.getElementById("price"+i);
    var quantity = document.getElementById("quantity"+i);
    var n = parseInt(quantity.value,10);
    if (n<1 || isNaN(n)) { n=1; }
    quantity.value = n;
    //console.log(n);
    var netAmount = document.getElementById("netAmount"+i);
    var netamt = price.value * quantity.value;
    netAmount.value = netamt;
    calcNetTotal();
}
function calcNetTotal(){
    var netTotalAll = document.getElementById("netTotalAll");
    var sum = 0;
    for (var j=1; j<=25; j++) {
        var netAmount = document.getElementById("netAmount"+j).value;
        if (netAmount!='') {
            sum += parseFloat(netAmount);
        }
    }
    netTotalAll.value = sum.toFixed(2);
}
</script>
<style type="text/css">
    table { margin:0px auto; border:1px solid #888; }
    table td, table th { border:0; padding:0; }
    table tbody tr td:first-child, #netTotalAll {
        font-weight:bold; min-width:4em; text-align:center;
    }
    table tbody tr td input{
        padding:8px 3px;
    }
    table td input { width:98%; border:1px solid #ccc; }
    table tr:hover * { background-color:#efe;  }
    #tdTotal { padding-left:1em; }
    input[id^=netAmount] { text-align:center; }
</style>
</head>
<body>

<p id="msg" align="center"> </p>


<table>
<thead>
<tr>
<th>#</th>
<th>Item Name</th>
<th>Item Code</th>
<th>Quantity</th>
<th>Price</th>
<th>Net Amount</th>
</tr>
</thead>

<tbody>
<?php for($i=1 ; $i<=25 ; $i++) {
echo '<tr>
<td>'.$i.'</td>
<td><input id="itemName'.$i.'" onBlur="loadAllFields('.$i.',\'name\')" class="orderInput" type="text" /></td>
<td><input id="itemCode'.$i.'" onBlur="loadAllFields('.$i.',\'code\')" class="orderInput" type="text" /></td>
<td><input id="quantity'.$i.'" class="orderInput" onKeyUp="calqtyprice('.$i.')" type="text" /></td>
<td><input id="price'.$i.'" class="orderInput" type="text" readonly /></td>
<td><input id="netAmount'.$i.'" class="orderInput" type="text" readonly /></td>
</tr>';
}
?>
</tbody>

<tfoot>
<tr>
<td id="tdTotal" colspan="2" style="font-size:16px"> <b>Totals</b></td>
<td id="totalspace" colspan="3"> </td>
<td><input id="netTotalAll" class="orderInput" type="text" readonly> </td>
</tr>

</tfoot>
</table>
<!-- http://stackoverflow.com/questions/17260771/mulitple-rows-of-table-having-input-tag -->
</body>
</html>