Submit form without page refresh using ajax php; in this example; i will show you how to submit form without page refresh using jQuery ajax in PHP MySQL with validation. And insert data into php mysql database using jquery ajax without page refresh.
Also in this post, you will learn how to insert data in database using jquery ajax in PHP MySQL with validation. And validate form data using jQuery ajax in PHP MySQL.
Description :- i will create database for store/save ajax form data. Then will create database connecting file and ajax html form. After that, will create store form data into database using jQuery ajax in PHP MySQL with validation.
Also, you can use this code personally and professionally.
Submit a form without page refresh using jQuery, Ajax, PHP MySQL Bootstrap
Follow the below given steps to how to submit a form using ajax without page refresh in php:
- Step 1 – Requirement and Create Directory
- Step 2 – Create phpmyadmin MySQL Database and Connecting File
- Step 3 – Create Ajax HTML Form
- Step 4 – Create ajax-insert-data.php File
Step 1 – Requirement and Create Directory
In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.
Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).
Step 2 – Create phpmyadmin MySQL Database and Connecting File
In step 2, you need to create database and table. So run the following sql query to create database and table:
CREATE DATABASE my_db; CREATE TABLE `customers` ( `id` int(10) UNSIGNED NOT NULL, `fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `created_date` date DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Then create a php file that named mydbCon. Which is used to connect phpmyadmin mysql database to project (demo).
So, now create mydbCon file and add the below given code into your file:
<?php
$hName='localhost'; // host name
$uName='root'; // database user name
$password=''; // database password
$dbName = "my_db"; // database name
$dbCon = mysqli_connect($hName,$uName,$password,"$dbName");
if(!$dbCon){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 3 – Create Ajax HTML Form
In step 3, create a php file that named ajax-form-submit.php. This file will display PHP MySQL ajax form and store form data into MySQL database without refresh whole web page.
Here, i will use jQuery ajax validation with PHP MySQL form. Now, you need to add the following ajax html form code into ajax-form-submit.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Form Submission and Validation Using Ajax and jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>PHP MySQL Form Submit using jQuery and Ajax With Validation</h2>
</div>
<span id="err-msg" style="display: none"></span>
<form action="javascript:void(0)" method="post" id="php-ajax-form">
<div class="form-group">
<label>First Name</label>
<input type="text" name="fname" id="fname" class="form-control" value="" maxlength="50" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname" id="lname" 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>
<input type="submit" class="btn btn-primary" name="submit" value="submit">
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
// on submit...
$('#php-ajax-form').submit(function(e){
e.preventDefault();
$("#err-msg").hide();
//name required
var fname = $("input#fname").val();
if(fname == ""){
$("#err-msg").fadeIn().text("First Name required.");
$("input#fname").focus();
return false;
}
// last name
var lanme = $("input#lname").val();
if(lanme == ""){
$("#err-msg").fadeIn().text("Last Name required");
$("input#lanme").focus();
return false;
}
// email required
var email = $("input#email").val();
if(email == ""){
$("#err-msg").fadeIn().text("Email required");
$("input#email").focus();
return false;
}
// ajax
$.ajax({
type:"POST",
url: "ajax-insert-data.php",
data: $(this).serialize(), // get all form field value in serialize form
success: function(){
alert('Form Has been submitted successfully using ajax in PHP');
}
});
});
return false;
});
</script>
</body>
</html>
Step 4 – Create ajax-insert-data.php File
In step 4, create new file that named ajax-insert-data.php file. Because this is used to store ajax form data into mysql database.
So, add the below code into your ajax-insert-data.php file:
<?php
include "mydbCon.php";
$fname = mysqli_real_escape_string($conn, $_POST['fname']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$lname = mysqli_real_escape_string($conn, $_POST['lname']);
if(mysqli_query($conn, "INSERT INTO customers(fname, lname, email) VALUES('" . $fname . "', '" . $lname . "', '" . $email . "')")) {
echo '1';
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}
?>
The submit form without page refresh using ajax jquery and php will look like in following image:
