hello,

I have a table with 10 rows and 6 columns in each row all with text fields . i have named the text fields from text1 to text60.Actually i need to find the total price of every item in each row,by multiplying the quantity and the unit price for each item in that row.I tried writing a onFocus() function (onFocus() on tht "totalprice" text field for the first row.... a function is called tht performs the multiplication and displays the value in tht textfield ).It works....... but i cannot keep writing a different onFocus function for finding the total price value in each and every row.....the next rows thaat follow.....because the text field names are different...the code becomes redundant... i do not know how to access the name of the text field dynamically....so that i can call only one function to perform the total price calcuation for all rows...
please help.....
thank u

Dani AI

Generated

Good thread so far — showed the problem with individually named fields and offered a cleaner single-function approach. Building on that, focus on three practical improvements that make the form easier to maintain and more reliable over time.

Use semantic inputs and accessible outputs: give quantity/price/total inputs meaningful classes or data attributes, make the total field readOnly (so users cannot edit it), and announce grand-total updates with an ARIA live region. Prefer type="number" with step/min for basic client-side validation and better mobile keyboards (input type=number). Always validate on the server too — client-side logic is convenience, not security.

Avoid floating-point surprises and many duplicate handlers: listen once on the table (event delegation) and find the row container to recompute only that row. Parse and normalize user input (strip commas/currency marks), then do arithmetic in integer cents to avoid rounding errors, format the result with Intl.NumberFormat for users’ locale (event delegation, Intl.NumberFormat).

Example (concept only — attach a single input listener, find the row, compute cents, set readOnly total):

table.addEventListener('input', e => {
  if (!e.target.matches('.qty, .price')) return;
  const row = e.target.closest('tr');
  const q = Number(row.querySelector('.qty').value) || 0;
  const p = Number(row.querySelector('.price').value) || 0;
  const cents = Math.round(q * p * 100);
  row.querySelector('.total').value = (cents/100).toFixed(2);
});

Test with empty/invalid inputs, negative values, and different locales. Small, well-tested calculation code is easier to reuse when rows are generated dynamically.

Recommended Answers

All 4 Replies

what code have you got? if you post what you have so far, it'd be easier to understand what your trying to do.

if you use a naming (identifying) convention, it might help, if you pass in parameters to your function that differ for each row it might help, if you bind the javascript event handlers at runtime rather than specifying them using HTML attributes it might help, but... without seeing some code it's hard to give useful pointers.

what code have you got? if you post what you have so far, it'd be easier to understand what your trying to do.

if you use a naming (identifying) convention, it might help, if you pass in parameters to your function that differ for each row it might help, if you bind the javascript event handlers at runtime rather than specifying them using HTML attributes it might help, but... without seeing some code it's hard to give useful pointers.

thank you sir for the reply.I tried working out your logic , but still iam not able to access the text field name........... i post my code here....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
var qty1,unitprice1,total1;
function total()
{
   qty1=qty1=document.procure.text2.value;
   unitprice1=document.procure.text5.value;
   document.procure.text6.value=qty1*unitprice1;
   total1=document.procure.text6.value;
}
</script>
</HEAD>
<BODY>
    <form name="procure">
    <table width="954" border="0" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr bgcolor="#99CCFF">
        <td width="122"  bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style22 style23">ITEM </div></td>
        <td width="120" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style25 style26">QTY </div></td>
        <td width="113" bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>TYPE </strong></div></td>
        <td width="290" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>DESCRIPTION </strong></div></td>
        <td width="142" bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>UNIT PRICE </strong></div></td>
        <td width="161" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>TOTAL PRICE </strong></div></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text1" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text2" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1">&nbsp;
            <input type="text" name="text3" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text4" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150">
        </td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text5" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text6" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1" onFocus="total()"></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text7"  size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1">
        </td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text8"  size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text9" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text10" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150"></td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text11" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text12" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text13" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text14" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text15" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text16" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150"></td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text17" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text18" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text19" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text20" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text21" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text22" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150"></td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text23" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text24" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
      </tr>
   <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text25" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text26" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text27" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text28" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150"></td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text29" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text30" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
      </tr>
   <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text31" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text32" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text33" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="text34" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150"></td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="text35" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="text36" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
      </tr>
   </BODY>
</HTML>

i wrote the javascript function for performing the calculation for total price in the first row.... how can i call the same function for calculating the total price in the rest of the rows?
thank you

I've removed a couple of your rows for the purpose of demonstration, code follows this explanation.

Some things to look at:

- Each input has a new name, the name is either "qty", "price", "total" (etc) followed by a number that represents the row's index.
- The calls to the function total() are now calls to row_total(row), where row is the index of the row that needs to be recalculated.
- A new function 'grand_total()' calculates the grand total after each row total is recalculated.. i don't know whether you needed that but it looked like you were perhaps trying to do it. For the benefit of that function; the constant NUM_ROWS is defined as being the count of rows in the table.
- There is no error checking - This is important to consider because if you enter non-numeric data where numeric data is expected, you'll get funny NaN (not a number) entries in your totals, and they will propogate into the grand total field.

Code's been tested on Opera 9 and Firefox 2. Can't test it on IE because I'm not a Windows user.

Post back if you need more help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
var ROW_COUNT = 3;
function total_row(row)
{
   var qty = parseFloat(document.procure["qty"+row].value);
   var unitprice = parseFloat(document.procure["price"+row].value);
   document.procure["total"+row].value = qty*unitprice;
	 total_grand();
}
function total_grand()
{
	var sum = 0;
	for(var i = 1; i <= ROW_COUNT; i++)
	{
		var row_total = parseFloat(document.procure["total"+i].value);
		sum += row_total;
	}
	document.procure["grand_total"].value = sum;
}
</script>
</HEAD>
<BODY>
    <form name="procure">
    <table width="954" border="0" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr bgcolor="#99CCFF">
        <td width="122"  bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style22 style23">ITEM </div></td>
        <td width="120" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style25 style26">QTY </div></td>
        <td width="113" bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>TYPE </strong></div></td>
        <td width="290" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>DESCRIPTION </strong></div></td>
        <td width="142" bordercolor="#CCCCCC" style="border-style: solid; border-width: 0" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>UNIT PRICE </strong></div></td>
        <td width="161" bordercolor="#CCCCCC" style="border-style: solid; border-width: 1" bgcolor="#99CCFF" height="21"><div align="center" class="style15"><strong>TOTAL PRICE </strong></div></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="item1" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="qty1" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1">&nbsp;
            <input type="text" name="type1" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="desc1" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150">
        </td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="price1" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="total1" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1" value="0" onFocus="total_row(1)"></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="item2" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="qty2" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1">&nbsp;
            <input type="text" name="type2" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="desc2" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150">
        </td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="price2" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="total2" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1" value="0" onFocus="total_row(2)"></td>
      </tr>
      <tr>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="item3" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="121" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="qty3" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="112" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1">&nbsp;
            <input type="text" name="type3" size="15" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="291" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input name="desc3" type="text" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"  size="50" maxlength="150">
        </td>
        <td width="141" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 0; border-bottom-style: solid; border-bottom-width: 1"> &nbsp;
            <input type="text" name="price3" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1"></td>
        <td width="161" height="27" bordercolor="#CCCCCC" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1" align="center"> &nbsp;
            <input type="text" name="total3" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1" value="0" onFocus="total_row(3)"></td>
      </tr>
		</table>
		<br/>
		Grand Total <input type="text" name="grand_total" size="20" style="font-family: ari; font-size: 9pt; border: 1px solid #808080; background-color: #FFFFFF; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1" value="0">
		</form>
</BODY>
</HTML>

thank you sir ..... i understood your code .. i will try using that......thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.