AJAX doesn't insert data into database - php

Question

I have several advertisements. Each of them has a 'garage' button. If I click this button, it should insert his own userid and motorcycle id into the database. I think the insert method is good but something isn't good with the ajax. I get the success message back, but the data doesn't get inserted to my database.
<form action="" method="POST" id="upload-to-garage<?php echo $row['id']; ?>">
<div class="float-right">
<input type="hidden" value="<?php echo $row['id']; ?>" name="advert-id">
<button type="submit" class="btn bg-transparent" name="garage"><i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Place to my garage"></i></button>
</div>
</form>
$(document).ready(function() {
$("#upload-to-garage<?php echo $row['id']; ?>").submit(function(e) {
e.preventDefault();
$.ajax({
url: "upload-to-garage.php",
method: "post",
data: $("form").serialize(),
dataType: "text",
success: function() {
alert('success');
}
});
});
});
upload-to-garage.php
<?php
session_start();
require_once("config.php");
// Add to garage
if (isset($_POST['garage'])) {
$advertId = $_POST['advert-id'];
$userid = $_SESSION['id'];
$stmt = $link->prepare("INSERT INTO garage (userid, motorcycleid) VALUES (?, ?)");
$stmt->bind_param('ii', $userid, $advertId);
$stmt->execute();
$stmt->close();
}
?>
Just checked and if I skip the AJAX part and using the simple PHP, it works fine. So the problem is with the AJAX for sure, but can't see what.

Answer 1

You can change your event handler like this $("form[id*=upload-to-garage]") instead of using php code for ids and then use $(this) to refer current form.Also, when you use serialize function submit button value doesn't get send so you can attach that as well using &parametername=somevalue
Demo Code :
$(document).ready(function() {
//form when submit
$("form[id*=upload-to-garage]").submit(function(e) {
console.log($(this).serialize() + "&garage=somevalue")
e.preventDefault();
$.ajax({
url: "upload-to-garage.php",
method: "post",
data: $(this).serialize() + "&garage=somevalue", //use this here
dataType: "text",
success: function() {
alert('success');
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST" id="upload-to-garage1">
<div class="float-right">
<input type="hidden" value="1" name="advert-id">
<button type="submit" class="btn bg-transparent" name="garage"><i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Place to my garage">i</i></button>
</div>
</form>
<form action="" method="POST" id="upload-to-garage2">
<div class="float-right">
<input type="hidden" value="2" name="advert-id">
<button type="submit" class="btn bg-transparent" name="garage"><i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Place to my garage">i</i></button>
</div>
</form>