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.