Unable to use .find() to get value from table/form

Trying to wrap my head around this for a while now. Some guru needs to help me out, it would be greatly appreciated. I don’t know why it is not working.

$(".form").on('submit', function(event) {
  event.preventDefault(); //prevent the forms default action
  var surname = $(this).find(".surname");
  console.log(surname);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">john</td>
      <td class="surname">smith</td>
      <td>british</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>

  </form>

  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">bob</td>
      <td class="surname">doe</td>
      <td>american</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
  </form>
</table>

So if i click on the first submit button i should see john, and the second, bob.

Leave a Reply Cancel reply