Pritam Tiwari Pritam Tiwari - 7 months ago 44
Javascript Question

how do add dynamic textfield on button click

I am working on jsp pages.Here i have requirements to add textfields on button click.

as shown in image.

I am unable to write java script function to add textField on button click.

<body>
<button type="button">Add more !</button>
<table id="customers">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text" name="product" value="product.."></input></td>
<td><input type="number" name="quantity" value="quanty.."></input></td>
<td><input type="number" name="price" value="price.."></input></td>
</tr>
// i want to add these fields dynamically on button click.
</table>
</body>

Answer

Just try. Just an example.

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>

<button type="button">Add more !</button>
 <table id="customers">
   <tr>
     <th>Product</th>
     <th>Quantity</th>
     <th>Price</th>
  </tr>
      <tr>
         <td><input type="text" name="product" value="product.."></input></td>
        <td><input type="number" name="quantity" value="quanty.."></input></td>
        <td><input type="number" name="price" value="price.."></input></td>
      </tr>

 </table>

  <script>

     $(document).ready(function(){

       $("button").on("click", function(){

         var row = '<tr><td><input type="text" name="product" value="product.."></input></td><td><input type="number" name="quantity" value="quanty.."></input></td><td><input type="number" name="price" value="price.."></input></td></tr>';

         $("#customers").append(row);

       });

     });

    </script>

    </body>
    </html>