Topic: onchange for dynamically added rows (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=32034" title="Pages that link to Topic: onchange for dynamically added rows (Page 1 of 1)" rel="nofollow" >Topic: onchange for dynamically added rows <span class="small">(Page 1 of 1)</span>\

 
karthikjayraj
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2010

posted posted 10-25-2010 12:40

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.

Code is as below
direct_invoice.html

code:
</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 for dynamically adding rows works as below for each cell

for newly added row the columnQuantit will be created like this

Add row()

code:
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
e4.type = 'text';
e4.name = 'quantity[]';
e4.id = 'quantity[]';
e4.size = 4;
e4.maxsize = 100;
cellRight4.appendChild(e4);




calculate price:

code:
function onc() {

var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b);
document.getElementById('price[]').value =c;
}

coach
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2011

posted posted 05-31-2011 10:59
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu