How to avoid HTML button outside a form performing form action

Question

I have a button outside of my form that triggers some jQuery but for some reason it also performs the action of the form.

I checked this post Performs form action even out of the form but I don't have the same thing that causes the problem.

<form action="edit.php" method="post">
   <div class="table">
       <table cellspacing="0">
           <tr class="top">
              <th>Titel</th>
              <th>Auteur</th>
              <th>ISBN13</th>
              <th>Uitgever</th>
              <th>Pagina's</th>
              <th>ID</th>
              <th></th>
              <th></th>
           </tr>
       <?php

       $sql = "SELECT * FROM books";
       $result = $conn->query($sql);

       if ($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
             ?> 
             <tr>
                <th><?php echo $row['title']; ?></th>
                <th><?php echo $row['author']; ?></th>
                <th><?php echo $row['isbn13']; ?></th>
                <th><?php echo $row['publisher']; ?></th>
                <th><?php echo $row['pages']; ?></th>
                <th><?php echo $row['id']; ?></th>
                <th><a href="edit.php?id=<?php echo $row['id']; ?>">Edit</a?</th>
                <th>
                   <form action="common/delete.php" method="post">
                      <button type="submit" name="delete">Delete</button>
                      <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
                   </form>
                </th>
              </tr>
              <?php
           }
        } else {
            echo "Sorry, maar er zijn nog geen boeken in het assortiment.";
        }

        $conn->close();
        ?>
        </table>
    </div>
</form>
<button class="cancel2">Annuleren</button>

The jQuery worked before I added all the code in the table and it still does but it also sends you to edit.php even tho its outside of the form

and dont nest form elements: https://stackoverflow.com/questions/379610/can-you-nest-html-forms — FatFreddy, Sep 16 '19 at 12:13
In that case you can use event.preventDefault() by that class or giving ID to that button. — Suraj Singh, Sep 16 '19 at 13:02

score 0 · Accepted Answer · answered Sep 16 '19 at 12:24

The button was assigned to the form automaticly because it didn't have any other function.

$(document).on("submit","#list",function(e){
   e.preventDefault();
});

By adding this it will disable the default submit function of the button, making sure only the jquery gets activated and nothing else.

How to avoid HTML button outside a form performing form action

1 Answers1