javascript code for performing calculation when all the columns have the same name

hello.......
i have a table that stores the quantity , unitprice , total values in the text fields......... actually this total column should be calculated automatically...when i use a onFocus function on tht text field i.e total=qty*unitprice ....... this code works fine when the text field in all the rows have different names .... like its qty1 for the first row....qty2 for the second row...... but i want to have all the columns to have the same name ...like only qty,unitprice,total...... i need the naming to be this way as i have to store these into database and all.....if i use different names...then the other part of my code becomes difficult....how do i perform the calculation when the names are same....

here is my code............

<HTML>
 <HEAD>
 <script>
 function total()
  {
   var qty= document.form1.qty.value;
   var up=document.form1.up.value;
   var total=qty*up;
   document.form1.total.value=total;
   }
</script>
  </HEAD>
 <BODY>
 <form name="form1">
 <table border="1">
  <tr> 
  <th> S.NO </th>
  <th> Qty </th>
  <th> Unit price </th>
  <th> Total </th>
  </tr>
  <tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total"  onFocus="total()"> </td>
  </tr>
  <tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total" onFocus="total()"> </td>
  </tr>
<tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total"  onFocus="total()"> </td>
  </tr>
</table>
</form>
 </BODY>
</HTML>

this code displays an error...... cud anyone please tell me the error and how to do this....

poojas

Newbie Poster

5 posts since Feb 2007

Reputation Points: 10

Solved Threads: 0

5 Years Ago

Try this:

<HTML>
 <HEAD>
 <script>
 function this_total( for_what )
 {
   var this_row = for_what.parentElement.parentElement;
   var qty = this_row.getElementsByTagName("td")[1].getElementsByTagName("input")[0].value;
   var up  = this_row.getElementsByTagName("td")[2].getElementsByTagName("input")[0].value;
   var total = qty * up;
   for_what.value = total;  
   return;
 }
</script>
  </HEAD>
 <BODY>
 <form name="form1">
 <table border="1">
  <tr> 
  <th> S.NO </th>
  <th> Qty </th>
  <th> Unit price </th>
  <th> Total </th>
  </tr>
  <tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total"  onFocus="this_total( this )"> </td>
  </tr>
  <tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total" onFocus="this_total( this )"> </td>
  </tr>
<tr> 
  <td> <input type="text" name="sno"> </td>
  <td> <input type="text" name="qty"> </td>
  <td> <input type="text" name="up"> </td>
  <td> <input type="text" name="total"  onFocus="this_total( this )"> </td>
  </tr>
</table>
</form>
 </BODY>
</HTML>

It will work assuming that you don't change the positioning relationships within the table. If you can't see what's happening there:

- The onfocus event calls the this_total function passing in a parameter value 'this'. In that context; 'this' refers to the input element that was focused. Inside the this_total function, that parameter is called 'for_what' (can't use 'this' in the function, because it means something different there)
- This line var this_row = for_what.parentElement.parentElement; find the parent of the parent of the input element (that is, the table row)
- This line: var qty = this_row.getElementsByTagName("td")[1].getElementsByTagName("input")[0].value; get reference to the SECOND (array indexes start from 0) td element in the table row; then the first input element in the table row; then the value of that element.
- Rest is self explanatory; there's no need to 'find' the total cell; because it's referenced already as 'for_what'

By the way; I get errors if I rename the function to "total". That indicates that 'total' may be a reserved keyword in JS....

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

This article has been dead for over three months

You