I’m encountering an issue with my web form where the submitted data is not getting inserted into the database. I’ve manually added data to the database, but when I submit the form, nothing happens.
I have three files: index.php, script.js, and submit.php.
Could someone please assist me in troubleshooting this issue and identifying where the problem might be coming from?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<!-- Display Error Message -->
<?php
if (isset($_GET['error'])) {
echo "<p class='error'>{$_GET['error']}</p>";
}
?>
<form id="registrationForm" method="post" action="./submit.php">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="tel" id="phoneNumber" name="phoneNumber" pattern="[0-9]{11}" required>
<small>Format: 11 digits without spaces or dashes</small>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="student_password" required>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from submitting
// Get form values
let firstName = document.getElementById("firstName").value;
let lastName = document.getElementById("lastName").value;
let phoneNumber = document.getElementById("phoneNumber").value;
let password = document.getElementById("password").value;
// Do something with the form values (e.g., send them to a server)
console.log("First Name:", firstName);
console.log("Last Name:", lastName);
console.log("Phone Number:", phoneNumber);
console.log("Password:", password);
// Clear the form
document.getElementById("registrationForm").reset();
});
<?php
// Database connection
$servername = "localhost";
$username = "root";
$db_password = "";
$dbname = "student_registration_portal";
// Create connection
$conn = new mysqli($servername, $username, $db_password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Form data
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$phoneNumber = $_POST['phoneNumber'];
$userPassword = $_POST['student_password'];
// Insert data into database
$sql = "INSERT INTO students (first_name, last_name, phone_number, student_password)
VALUES ('$firstName', '$lastName', '$phoneNumber', '$userPassword')";
// Execute SQL query
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
// Log error
error_log("Error: " . $sql . "n" . $conn->error);
// Output error message
echo "Error: " . $sql . "<br>" . $conn->error;
}
// Close database connection
$conn->close();
?>
the xampp mysql database and table
I’m encountering an issue with my web form where the submitted data is not getting inserted into the database. I’ve manually added data to the database, but when I submit the form, nothing happens.
I have three files: index.php, script.js, and submit.php.
Could someone please assist me in troubleshooting this issue and identifying where the problem might be coming from?
Added logs to check errors and its clean. enter image description here
I have added logs in script.js and error catching in submit.php but they are clean. I am using php 8.2.16 version and vs code
