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


Hello, Friends,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.

Creating Database Table

--
-- Database: `testing`

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

Creating HTML (index.php) and jQuery AJAX

<!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>

Database connectivity(dbConfig.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); 
	}

    
?>

Create 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() method in PHP Mysqli
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 / problems about this tutorial, please comment on the  form below.😊

Leave a Reply