How to Submit a Form Using jQuery AJAX in PHP?
AJAX (Asynchronous JavaScript and XML) enhances user experience by allowing web pages to update asynchronously by exchanging data with the server behind the scenes. This guide will demonstrate how to submit a form using jQuery AJAX in PHP. We will cover creating the HTML form, handling form submission with jQuery AJAX, and processing the data in PHP to store it in a MySQL database.
Step 1 : Set Up Your Database and Table
Before handling form submissions, you need a database to store the collected data. We’ll use MySQL for this example.
CREATE DATABASE jquery_ajax_form_submission_db;
USE jquery_ajax_form_submission_db;
CREATE TABLE contacts (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
phone VARCHAR(15) NOT NULL,
gender VARCHAR(10) NOT NULL,
hobbies TEXT,
country VARCHAR(50) NOT NULL,
profile_picture VARCHAR(255) NOT NULL
);
Step 2 : Create the HTML Form
Let’s create an HTML form that includes different types of input fields. Save this as index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery AJAX Form Submission Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Contact Form</h2>
<form id="contactForm" enctype="multipart/form-data">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label><br><br>
<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="hobby1" name="hobbies[]" value="reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobbies[]" value="travelling">
<label for="hobby2">Travelling</label><br><br>
<label for="country">Country:</label><br>
<select id="country" name="country" required>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select><br><br>
<label for="profile_picture">Profile Picture:</label><br>
<input type="file" id="profile_picture" name="profile_picture" required><br><br>
<input type="submit" value="Submit">
</form>
<div id="response"></div>
<script>
$(document).ready(function() {
$('#contactForm').on('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
$.ajax({
url: 'submit_form.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
const response = JSON.parse(data);
const responseDiv = $('#response');
if (response.success) {
responseDiv.html(`<p style="color: green;">${response.message}</p>`);
} else {
responseDiv.html(`<p style="color: red;">${response.message}</p>`);
}
},
error: function(jqXHR, textStatus, errorThrown) {
$('#response').html(`<p style="color: red;">${textStatus}: ${errorThrown}</p>`);
}
});
});
});
</script>
</body>
</html>
Step 3 : Create the PHP Script to Handle Form Submission
Next, create the submit_form.php file to handle the form submission and store data in a MySQL database.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "jquery_ajax_form_submission_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(json_encode(['success' => false, 'message' => 'Connection failed: ' . $conn->connect_error]));
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Sanitize and validate input fields
$name = htmlspecialchars(strip_tags(trim($_POST["name"])));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = htmlspecialchars(strip_tags(trim($_POST["phone"])));
$gender = htmlspecialchars(strip_tags(trim($_POST["gender"])));
$hobbies = isset($_POST["hobbies"]) ? implode(", ", $_POST["hobbies"]) : "";
$country = htmlspecialchars(strip_tags(trim($_POST["country"])));
// Handle file upload
if (isset($_FILES["profile_picture"]) && $_FILES["profile_picture"]["error"] == 0) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["profile_picture"]["name"]);
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Check if file is an image
$check = getimagesize($_FILES["profile_picture"]["tmp_name"]);
if ($check !== false) {
if (move_uploaded_file($_FILES["profile_picture"]["tmp_name"], $target_file)) {
$profile_picture = $target_file;
} else {
echo json_encode(['success' => false, 'message' => 'Sorry, there was an error uploading your file.']);
exit;
}
} else {
echo json_encode(['success' => false, 'message' => 'File is not an image.']);
exit;
}
}
// Insert data into the database
$sql = "INSERT INTO contacts (name, email, phone, gender, hobbies, country, profile_picture)
VALUES ('$name', '$email', '$phone', '$gender', '$hobbies', '$country', '$profile_picture')";
if ($conn->query($sql) === TRUE) {
echo json_encode(['success' => true, 'message' => 'Form data submitted successfully.']);
} else {
echo json_encode(['success' => false, 'message' => 'Error: ' . $conn->error]);
}
$conn->close();
} else {
echo json_encode(['success' => false, 'message' => 'Invalid request method.']);
}
?>
Conclusion :
Submitting forms using jQuery AJAX in PHP enhances the user experience by providing real-time feedback without reloading the page.
By following this guide, you can create and handle form submissions using jQuery AJAX in PHP, providing a seamless user experience.
Happy Coding!
