0

I want to append and remove rows to a table dynamically in a form. jquery for appending the tr is applied. But when i add or delete rows the form is submitting without click the submit button. Here is my code`

 <html>
  <head>
   <script type="text/javascript" src="jquery.min.js"></script>
   <script>
    $(document).ready(function(){
    $('#add').click(function(){
      i=1;
        var row="<tr><td><input type='checkbox' />";
          row+="</td><td><input type='text' name='bundle[]' id='bnd"+i+"' /></td>";
          row+="<td><input type='number' name='scripts[]' id='script"+i+"' min='1' /></td></tr>";
       i++;
       $('#bundle').append(row);
   });
   $('#remove').click(function(){
     $("#bundle input:checkbox:checked").closest('tr').remove(); 
    });  

 });
  </script>
<style>
td
{
    padding-left:8px;
    height:30px;
}
input[type=number]
{
  width:60px;
}
</style>
</head>
  <body>
     <div id="details">
       <form method="post" action="test1.php" id="form">

       &nbsp&nbsp<button id="add">+Add</button>&nbsp&nbsp&nbsp <button id="remove">- Remove</button>
   <table id="bundle">
      <tr><td width='30px'></td><td width="200px">Bundle No.</td><td>No. of scripts</td></tr>
     <tr><td><input type='checkbox' /></td>
       <td><input type='text' name='bundle[]' /></td>
       <td><input type='number' name='scripts[]'  min='1' /></td>
      </tr>
   </table>

   <br>
     <center><input type="submit" id="submit" value="submit" /></center>
     <br>
   </form>
   </div> 
 </body>
</html>
nriit
  • 23
  • 3

1 Answers1

0

In order to not to submit when you click buttuon, you need to add type="button".
Please see this answer: How to prevent buttons from submitting forms

So please try adding type="button" as shown below. You can fire click event by this.

&nbsp;&nbsp;<button type="button" id="add">+Add</button>
&nbsp;&nbsp;&nbsp; <button type="button" id="remove">- Remove</button>
Adrian W
  • 4,563
  • 11
  • 38
  • 52
kuromoka
  • 832
  • 7
  • 13