multiple forms with jquery serialize method not working - php

Question

I have multiple form and each form is getting submitted but not the first one.
I tried everything like event.preventDefault();
MY CODE :
<?php for($i=0;$i<=5;$i++){ ?>
<form id="form<?php echo $i; ?>>
<td><?php echo $i++ ?><td>
<td><input type="text" name="detention_unloading_charges" value="<?php echo $history[$i]->name; ?>"></td>
<td><input type="text" name="dtn_chrg_per_day" value="<?php echo $history[$i]->dtn_chrg_per_day; ?>"></td>
<td><input type="text" name="dtn_chrg" value="<?php echo $history[$i]->dtn_chrg; ?>"></td>
<td>
<button class="btn btn-secondary" type="button" onclick="save_changes(<?php echo $i ?>);">Save Changes</button></td>
</form>
}
and jquery function:
function save_changes(id)
{
$.ajax({
url: "History/update",
type: "POST",
data: $('#form'+id).serialize(),
success: function(data) {
// Success message
console.log(data);
if(data==1){
$('.success_pop_up').addClass('show').removeClass('d-none');
} else{
$('.failure_pop_up').addClass('show').removeClass('d-none');;
}
}
});
}

Answer 1

You are incrementing $i twice in the beginning itself by echo $i++, which also increments $i apart from for loop , so loop runs only thrice and form id is form0 but corresponding function is save_changes(1) , where that form id does not exist at all , try below code.
<?php for($i=0;$i<=5;$i++){ ?>
<form id="form<?php echo $i; ?>>
<td><?php echo $i?><td>
<td><input type="text" name="detention_unloading_charges" value="<?php echo $history[$i]->name; ?>"></td>
<td><input type="text" name="dtn_chrg_per_day" value="<?php echo $history[$i]->dtn_chrg_per_day; ?>"></td>
<td><input type="text" name="dtn_chrg" value="<?php echo $history[$i]->dtn_chrg; ?>"></td>
<td>
<button class="btn btn-secondary" type="button" onclick="save_changes(<?php echo $i ?>);">Save Changes</button></td>
</form>
<?php } ;?>
Try this code and let me know if it works.

Answer 2

You'll probably want to solve this the following way:
Let the button do a default submit like so:
<button type="submit">Send</button>
Catch the submit event for your form in jQuery:
$('form').on('submit', function(e) {
// Prevent default so the browser doesnt automatically submit it.
e.preventDefault();
var data = $(this).serialize();
// ... send it
});
This way it is much easier to do AJAX form requests.