Insert Form Data Using Jquery Ajax Serialize() Function In PHP Mysqli

In this post, you will learn how to create insert form data into a MySQL table using the JQuery Ajax serialize () method with PHP code without refreshing the page. This generates text strings from whole form data in the standard encoded URL notation form. This can be an action for a jQuery object that has selected various form controls, like input tag, textarea tag and select option tags.

After using the serialize () method, the data for the entire form is converted to an associative array, and users can use the form data in a PHP script using the post method. After using this method, we don’t have to specify data individually from the form. We cannot use this method with input file types. This method works in most browsers. Here I only explain if you want to learn in detail, please follow in below.

Table of Contents

Create a Database in MySQL

The first step in this tutorial is the creation of a MySQL database. you can create tables by running SQL queries. Create a table ‘users’ in database using the following SQL query.

--
-- Database: `testing`

-- Table structure for table `users`
--
CREATE TABLE `users` (
  `id` int(50) NOT NULL PRIMARY KEY AUTO_INCREAMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Create MySql Connection in PHP

For importing and exporting database in MySql will make a separate file ‘dbCongif.php’. Add the following code and replace the database credentials with yours. You can find your db credentials in Application Access details:

dbCongif.php

<?php
	// Database configuration 
	$dbHost     = "localhost"; 
	$dbUsername = "root"; 
	$dbPassword = ""; 
	$dbName     = "testing"; 
	 
	// Create database connection 
	$con = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName); 
	 
	// Check connection 
	if ($con->connect_error) { 
	    die("Connection failed: " . $con->connect_error); 
	}
?>

Creating HTML and jQuery AJAX

index.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insert Form Data using Jquery Ajax serialize() method in PHP Mysqli</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
  <body>
    <div class="container" style="margin-top: 50px;">
      <div class="row">
        <h2 class="text-center"><b>Insert Form Data using Jquery Ajax serialize() method in PHP Mysqli</b></h2><br>
        <div class="col-md-4"></div>
          <div class="col-md-4" style="margin-top:20px">
            <div class="alert alert-success alert-dismissible" id="success" style="display:none;">
              <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>
            <form role="form" id="submitForm">
              <div class="form-group">
                <input type="text" class="form-control" name="name" placeholder="Name" required="">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" name="email" placeholder="Email" required="">
              </div>
              <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="Password" required="">
              </div>
                <button type="submit" class="btn btn-info btn btn-block" id="submitbtn">Submit</button>
            </form>
          </div>
        </div>
     </div>
  </body>
</html>

<!---jQuery ajax serialize function --->
<script type="text/javascript">
  $(document).ready(function(){
      $("#submitForm").on("submit", function(e){
          e.preventDefault();
          $("#submitbtn").text('Please wait..');
          var userForm = $(this).serialize();
          $.ajax({
              url :"insert.php",
              type : "POST",
              cache:false,
              data: userForm,
              success:function(response){
                $("#success").show();
                $("#success").html("Data inserted successfully");
                $("#submitbtn").text('Submit');
                $("#submitForm")[0].reset();
              }
          });
      });
  });
</script>

PHP Code for Insert data using serialize function in PHP Mysql

insertData.php

<?php
	// include database connection file

	include "dbConfig.php";

	// insert data from users table..

	if (isset($_POST['name'])) {
		
		$name = strip_tags(trim($_POST["name"]));
		$email = strip_tags(trim($_POST["email"]));
		$password = strip_tags(trim(md5($_POST["password"])));
		
		$query = "INSERT INTO users (name,email,password) VALUES('$name','$email','$password')";
		$result = mysqli_query($con, $query);
		
		if ($result ===true) {
		    return true;
		}else{
		    return false;
		}
	}
?>

Output

Insert Form Data using Jquery Ajax serialize() function in PHP Mysqli

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊