Website URL
(My form data is not submitted, in network, I found some problem, )
Error Message
(script.js:10 GET https://errors.infinityfree.net/errors/404/ net::ERR_FAILED 500
(anonymous) @ script.js:10
script.js:24 Error saving form data: TypeError: Failed to fetch
at HTMLFormElement. (script.js:10:30)
errors.infinityfree GET errors.infinityfree. net/errors/404/ 404)
Other Information
Can anyone please help me
script.js
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("form");
const toastContainer = document.getElementById("toast-container1");
const toastMessage = document.getElementById("formToast-message");
form.addEventListener("submit", async function (event) {
event.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch("/server.php", {
method: "POST",
body: formData, // Send form data directly, no need for JSON.stringify
});
if (response.ok) {
toastContainer.classList.add("show");
setTimeout(() => {
toastContainer.classList.remove("show");
}, 3000);
form.reset();
} else {
console.error("Error saving form data");
}
} catch (err) {
console.error("Error saving form data:", err);
}
});
});
server.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Parse the JSON data from the request body.
$data = json_decode(file_get_contents("php://input"));
// Extract form data.
$name = $data->name;
$email = $data->email;
$contactNumber = $data->contactNumber;
$feedbackText = $data->feedbackText;
// Prepare and execute the SQL query.
$sql = "INSERT INTO feedbackform (name, email, contactNumber, feedbackText, createdAt) VALUES (?, ?, ?, ?, NOW())";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ssss", $name, $email, $contactNumber, $feedbackText);
if ($stmt->execute()) {
// Form data saved successfully.
http_response_code(200);
echo "Form data saved successfully";
} else {
// Error saving form data.
http_response_code(500);
echo "Internal Server Error";
}
form.htlm
<form action="/submit-form" method="post" style="font-size: 12px;">
