Hi ,
I am new to javascript and have coded an invoice page through help from some available content on web.
here is my requirement
My form contains inputs “item ,rate quantity,price” in a tabular form where one can dynamically add or delete rows.And the requirement is that
when Quantity is entered the Price should change to Price=Quantity*Rate on tab out
So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Let me know if you need more information
Code is as below
direct_invoice.html
</html>
<table align="center" width = "75%">
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<th>Item No</th>
<th>Item Name</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
<th> <font color="RED">Delete</font></th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td>
<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
<td><input type="text" id = "quantity[]" name="quantity[]" onchange = "onc();" size="4" maxsize="100" /></td>
<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
</tr>
</table>
<table id="totaltbl" align="right">
<tr>
<td></td>
</tr>
<tr>
<th>Vat %</th>
<td><input type="text" name="total" size="3" maxsize="3" /></td>
</tr>
<tr>
<th>Total</th>
<td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td>
</tr>
</table>
</td>
</tr>
</table>
<form action="save_entry.php" name="eval_edit" method="post" format="html">
<p>
<input type="button" value="Add Row" onclick="addRow();" />
<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />
<input type="button" value="Print" />
</p>
</form>
</html>
my java script works as below
for newly added row the columnQuantit will be created like this
Add row()
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
e4.type = 'text';
e4.name = 'quantity[]'// + iteration;
e4.id = 'quantity[]';// + iteration;
e4.size = 4;
e4.maxsize = 100;
cellRight4.appendChild(e4);
calculate price:
function onc() {
var a= document.getElementById('unitcost[this]');
var b= document.getElementById('quantity[this]');
var c = Math.ceil(a.value*b.value);
alert(b);
document.getElementById('price[1]').value =c;
}