HTML table multiple forms Ajax submit - html

Question

I have a table with multiple rows and multiple forms and I am trying to send each form to my PHP script.
When not using Ajax all the forms update correctly. However with Ajax I cannot get the PHP script to work. How can I get the Ajax to work?
On HTML part, I have multiple rows which belong to one form (In the example below all the rows belong to one form and I have multiple of these). I did read that a FORM tag cannot be under TR tag and even know when I look at the code it looks pretty ugly, but I am not sure how else I can build the table.
Ajax
$(document).ready(function(){
// click on button submit
$("#submit").on('click', function(){
// send ajax
$.ajax({
url: 'post.php', // url where to submit the request
type : "POST", // type of action POST || GET
dataType : 'json', // data type
data : $(this).serialize(), // post data || get data
})
});
});
HTML
<tbody>
<tr>
<form id="form1" method="POST" action=""></form>
<input type="hidden" name="ID" value="">
<td rowspan="6">bls</td>
<td rowspan="6">qasachin.dwxmp41#mailinator.com</td>
<td>Records</td>
<td>10</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Records"></td>
<td>Contact</td>
<td></td>
<td><input type="text" size="1" value="" name="Contact"></td>
<td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
<td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
</tr>
<tr>
<td>Centers</td>
<td>15</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Centers"></td>
<td>Company</td>
<td>Tadas</td>
<td><input type="text" size="1" value="" name="Company"></td>
</tr>
<tr>
<td>Duration</td>
<td>10</td>
<td>0</td>
<td><input type="text" size="1" value="" name="Duration"></td>
<td>Address</td>
<td></td>
<td><input type="text" size="1" value="" name="Address"></td>
<td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
</tr>
<tr>
<td>GCP</td>
<td>0</td>
<td></td>
<td><input type="text" size="1" value="" name="GCP"></td>
<td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
<td><a target="_blank" href="mailto:qasachin.dwxmp41#mailinator.com" class="btn btn-success>Email</a></td>
</tr>
<tr>
<td>RAND</td>
<td>0</td>
<td>0</td>
<td><input type="text" size="1" value="" name="RAND"></td>
<td>City</td>
<td>Amsterdam</td>
<td><input type="text" size="1" value="" name="City"></td>
</tr>
<tr>
<td>Price</td>
<td>€39</td>
<td>€18</td>
<td><input type="text" size="1" value="" name="Price"></td>
<td>Departm</td>
<td>IT</td>
<td><input type="text" size="1" value="" name="Departm"></td>
</tr>

Answer 1

You have invalid HTML markup.
Only td and th elements are allowed to be child elements of tr.
And you are immediately closing your form tag. Which means you don't have any fields inside your form.
You should put your whole table inside your form.
<form id="form1" method="POST" action="">
<input type="hidden" name="ID" value="">
<table>
<tbody>
<tr>
<td rowspan="6">bls</td>
<td rowspan="6">qasachin.dwxmp41#mailinator.com</td>
<td>Records</td>
<td>10</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Records"></td>
<td>Contact</td>
<td></td>
<td><input type="text" size="1" value="" name="Contact"></td>
<td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
<td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
</tr>
<tr>
<td>Centers</td>
<td>15</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Centers"></td>
<td>Company</td>
<td>Tadas</td>
<td><input type="text" size="1" value="" name="Company"></td>
</tr>
<tr>
<td>Duration</td>
<td>10</td>
<td>0</td>
<td><input type="text" size="1" value="" name="Duration"></td>
<td>Address</td>
<td></td>
<td><input type="text" size="1" value="" name="Address"></td>
<td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
</tr>
<tr>
<td>GCP</td>
<td>0</td>
<td></td>
<td><input type="text" size="1" value="" name="GCP"></td>
<td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
<td><a target="_blank" href="mailto:qasachin.dwxmp41#mailinator.com" class="btn btn-success>Email</a></td>
</tr>
<tr>
<td>RAND</td>
<td>0</td>
<td>0</td>
<td><input type="text" size="1" value="" name="RAND"></td>
<td>City</td>
<td>Amsterdam</td>
<td><input type="text" size="1" value="" name="City"></td>
</tr>
<tr>
<td>Price</td>
<td>€39</td>
<td>€18</td>
<td><input type="text" size="1" value="" name="Price"></td>
<td>Departm</td>
<td>IT</td>
<td><input type="text" size="1" value="" name="Departm"></td>
</tr>
</tbody>
</table>
</form>
You also need to handle the submit event on your form or your page will be reloaded.
You can do that by calling e.preventDefault() inside the handler.
$(function(){
// click on button submit
$("#form1").on("submit", function(e){
e.preventDefault(); // prevent page reload on submit
// send ajax
$.ajax({
url: 'post.php', // url where to submit the request
type : "POST", // type of action POST || GET
dataType : 'json', // data type
data : $(this).serialize(), // post data || get data
})
});
});