cant update db on ajax submit php form - php

Question

I can't update my database table on form submit with ajax. I don't know the reason or why this is happening. I posted my code below. Thanks.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$ime = !empty($_POST['ime']) ? stripslashes(trim($_POST['ime'])) : '';
$email = !empty($_POST['email']) ? stripslashes(trim($_POST['email'])) : '';
$poruka = !empty($_POST['poruka']) ? stripslashes(trim($_POST['poruka'])) : '';
$ime = htmlspecialchars($_POST['ime']);
$email = htmlspecialchars($_POST['email']);
$poruka = htmlspecialchars($_POST['poruka']);
//Validate Phone
if (empty($_POST["ime"])) {
http_response_code(400);
echo "Molimo, unesite Vaše ime i prezime.";
exit;
}else {
if (!preg_match('/^[a-zA-Z\s]+$/',$ime)) {
http_response_code(400);
echo "Dozvoljena su samo slova i space.";
exit;
}
}
//Validate Email
if (empty($_POST["email"])) {
http_response_code(400);
echo "Molimo, unesite Vaš e-mejl.";
exit;
} else {
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Nepravilan e-mejl format";
exit;
}
}
if (empty($_POST["poruka"])) {
http_response_code(400);
echo "Molimo, unesite Vašu poruku.";
exit;
}
if(isset($_POST['submit']) && !empty($_POST['ime']) && !empty($_POST['email']) && !empty($_POST['poruka'])){
$link = new mysqli("localhost", "admin", "", "proba");
$stmt = $link->prepare("INSERT INTO message(ime, email, poruka) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $ime, $email, $poruka);
$stmt->execute();
$stmt->close();
$link->close();
$email_message .= "Ime i prezime: ".htmlspecialchars($ime)."\n";
$email_message .= "E-mejl: ".htmlspecialchars($email)."\n";
$email_message .= "Poruka: ".htmlspecialchars($poruka)."\n";
$to = "somemail#mail.com";
$headers = 'From: '.$email."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
if (mail($to, $subject, $email_message, $headers)) {
http_response_code(200);
echo "Poruka je uspešno poslata!";
exit;
} else {
http_response_code(400);
echo "Message is not successfully sent";
exit;
}} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
exit;
}
}
?>
Html
<div class="container">
<h1>Kontakt</h1>
<div id="form-messages"></div>
<form action="mail.php" method="POST" id="form">
<input id="ime" type="text" name="ime" value="<?php echo !empty($ime) ? $ime : ''; ?>" placeholder="Ime i Prezime">
<input id="email" type="text" name="email" value="<?php echo !empty($email) ? $email : ''; ?>" maxlength="20" placeholder="E-mejl">
<textarea name="poruka" id="poruka" placeholder="Poruka" maxlength="700" cols="30" rows="10"><?php echo !empty($poruka)?$poruka:''; ?></textarea>
<input id="submit" type="submit" name="submit" value="Pošalji Poštu">
</form>
</div>
and JQuery
$(function() {
// Get the form.
var form = $('#form');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: 'mail.php',
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#ime').val('');
$('#email').val('');
$('#poruka').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
If anybody has a solution, please do tell. I copied and pasted this amount of code for you to see the context. I don't know where to look for the solution. Thank you.

Answer 1

The reason this does not work via ajax (but does via a conventional postback) is that jQuery's .serialize() method does not serialise button values.
Therefore despite you having name="submit" on your button, its value will not be sent to the server in the request when you make the ajax call. In a conventional postback, it would be, if the button was used as the means to submit the form.
The documentation says:
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button.
Although your button click may have triggered the code which submitted the form, it is no longer doing the form submission directly (instead ajax is doing it). In theory this could be triggered by anything, and jQuery has no way of knowing it was the button which started the process.
See https://api.jquery.com/serialize/ for more detail.
This causes you a problem because you test for the presence of this "submit" value before you make your database call and send your email. It's not really necessary to do this, since you're validating all the other input fields. I think you can just remove isset($_POST['submit']) from your if statement and you will have no problems. Therefore you'll be left with:
if(!empty($_POST['ime']) && !empty($_POST['email']) && !empty($_POST['poruka'])) {