[SOLVED] Javascript add delete row sends form instead of adding row

Javascript add delete row sends form instead of adding row

Can anyone help my with this script. Why is this form being submitted, instead of adding a new row on the table? If I delete the form tags and the submit button it works well to add and delete rows.

<html>
      <head>
 <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
      <script>
       document).ready(function() {
      var id = 0;
         // Add button functionality
         $("table.dynatable button.add").click(function() {
            id++;
            var master = $(this).parents("table.dynatable");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();
            prot.attr("class", "")
            prot.find(".id").attr("value", id);

            master.find("tbody").append(prot);
        });

        // Remove button functionality
        $("table.dynatable input.remove").live("click", function() {
            $(this).parents("tr").remove();

        });
    });
    </script>
    <style>
        .dynatable {
            border: solid 1px #000; 
            border-collapse: collapse;
        }
        .dynatable th,
        .dynatable td {
            border: solid 0px #000; 
            padding: 2px 10px;
            width: 170px;
            text-align: center;
        }
        .dynatable .prototype {
            display:none;
        }
      </style>
</head>
   <body>
    <FORM name="save_event_personal" method="post" action="fetchrequest.php">

    <table class="dynatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Start</th>
                <th>Ende</th>
                <th><button class="add">Add</button></th>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><input type="text" name="id[]" value="0" class="id" /></td>
                <td><input type="text" name="name[]" value="" /></td>
                <td><SELECT name="start[]">
                <OPTION value="10:00">10:00</OPTION>
                <OPTION value="11:00">11:00</OPTION>
                <OPTION value="12:00">12:00</OPTION>
                <OPTION value="13:00">13:00</OPTION>
                <OPTION value="14:00">14:00</OPTION>
            </SELECT></td>
                <td><SELECT name="end[]">
                <OPTION value="10:00">10:00</OPTION>
                <OPTION value="11:00">11:00</OPTION>
                <OPTION value="12:00">12:00</OPTION>
                <OPTION value="13:00">13:00</OPTION>
                <OPTION value="14:00">14:00</OPTION>
            </SELECT</td>
                <td><input type="image" class="remove" src="delete.png" alt="hi"/>
            </tr>

                 </table>
     <BR /><INPUT type="submit" value="Sumbit this form to fetchrequest.php" />
      </FORM></body>
   </html>

Solution

Try preventing the default action of the button, which would be to submit the form:

$("table.dynatable button.add").click(function(e) {
    ...
    e.preventDefault();
});