In this example post, you will learn how to create and submit a form to a MySQL database using jQuery, ajax, and PHP without refreshing or reloading the entire page.
How to Submit Form using jQuery Ajax and PHP to MySQL?
Use the below given steps to submit the form using jQuery Ajax and PHP with validation to MySQL database:
Step 1 – Create a Database Connection
In this step, you will create a file name db.php and update the below code into your file.
The below code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this file:
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 2 – Create a Form
In this step, you must create an Ajax form and update the code below in your ajax-form.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Form Using Ajax, PHP and jQuery Example - Tutsmake.com</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-offset-2">
<div class="page-header">
<h2>jQuery Ajax Form Submit Example In PHP</h2>
</div>
<p>Please fill all fields in the form</p>
<p id="show_message" style="display: none">Form data sent. Thanks for your comments.We will update you within 24 hours. </p>
<span id="error" style="display: none"></span>
<form action="javascript:void(0)" method="post" id="ajax-form">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" value="" maxlength="50" >
</div>
<div class="form-group ">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" value="" maxlength="30" >
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" class="form-control" value="" maxlength="12" >
</div>
<input type="submit" class="btn btn-primary" name="submit" value="submit">
</form>
</div>
</div>
</div>
</body>
</html>
Step 3 – Add jQuery and Ajax in Form
Edit your ajax-form.php file, and add jquery and ajax code to submit form to MySQL database without page refresh:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function($){
// hide messages
$("#error").hide();
$("#show_message").hide();
// on submit...
$('#ajax-form').submit(function(e){
e.preventDefault();
$("#error").hide();
//name required
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// email required
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required");
$("input#email").focus();
return false;
}
// mobile number required
var mobile = $("input#mobile").val();
if(mobile == ""){
$("#error").fadeIn().text("Mobile number required");
$("input#mobile").focus();
return false;
}
// ajax
$.ajax({
type:"POST",
url: "project_folder_name/ajax-form-save.php",
data: $(this).serialize(), // get all form field value in serialize form
success: function(){
$("#show_message").fadeIn();
//$("#ajax-form").fadeOut();
}
});
});
return false;
});
</script>
Step 4 – Handle Form Submission
Create new file name ajax-form-store.php file, and implement PHP code to handle ajax form submission to store form data in MySQL database:
<?php
require_once "db.php";
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
if(mysqli_query($conn, "INSERT INTO customers(name, email, mobile) VALUES('" . $name . "', '" . $email . "', '" . $mobile . "')")) {
echo '1';
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);
?>
Conclusion
In this tutorial, you have learned how to create and submit ajax form and store data into a MySQL database without reloading or refreshing the whole web page with client-side validation.
Recommended PHP Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
