Question

I have the following HTML form

<form action="#" method="post">

 <table>
 <tr>  
  <td><label>Product:<label> <input type="text" /></td>
  <td><label>Price:<label> <input type="text" /></td>
  <td><label>Quantity:<label> <input type="text"/></td>
  <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <tr>  
 <td><label>Product:<label> <input type="text" /></td>
 <td><label>Price:<label> <input type="text" /></td>
 <td><label>Quantity:<label> <input type="text"/></td>
 <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <!---only two rows have been created by the user -->


 <input type="button" value="Add product" onClick="addProductRow()"/> 
 <input type="submit" value="Submit"/>
 </table>  
</form>

The input fields are created dynamically by the user(there is button for adding a row to the page). When user adds the price and the quantity the amount(price*quantity) has to be displayed in the relevant amount field.

My problem is, how can i access each amount field to insert the total amount using JavaScript or jQuery.

Thank you in advance.

Answer 1

What I would do in this case is use parentNode until you get to the containing <tr>, and then use that table row node to search for the input fields.