jQuery Ajax serialize form data example
In this article, you will learn how to serialize form data and insert the data into a MySQL table by using jQuery Ajax.
The serialize() method is the constructor of the jQuery which is used in form data encoding and data processing. It processes the form data for posting to another page. It can control or manipulate structured form data for presenting on another page or storing in a database after form submission. This method returns a URL encoded text string by serializing form values for submission.
In the way of utilizing this serialize() method, the entire form data will be converted into an associative array and client can use this form data in PHP script by utilizing GET/POST method. It can follow up on a jQuery object that has chosen individual form controls. The element must have a name attribute to include the form element's value in the serialized string. To include radio buttons and check box values, they must be checked. But, we can not include the data from the file select element. As this method does not send files through a form.
Database Table
To store the form data in the back-end, we must have a database. In this article, we used the MySQL database.
So, let's first create a database name 'demo' in MySQL and a table name 'user_form' using the following MySQL statement. You can either use your existing database or copy and paste the following command in your database.
CREATE TABLE IF NOT EXISTS `user_form` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`message` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
)index.php
Next, create a simple form 'index.php' to get information from user. This form contains all the fields that the user_form table has. In this, we have included the jQuery and Bootstrap libraries.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax serialize form data example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
var dataString = $("#serializeForm").serialize();
$.ajax({
type: "POST",
url: "upload.php",
data: dataString,
success: function(data)
{
alert('Success!');
$("#serializeForm")[0].reset();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<form id="serializeForm" name="myForm">
<div class="form-group">
<label>Enter name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label>Enter Email:</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label>Enter Message:</label>
<textarea name="message" id="message" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
</form>
</div>
</body>
</html>upload.php
Here is the PHP script of "upload.php" file, which simply retrieves and inserts the form values submitted by the user.
<?php
$conn = mysqli_connect("localhost", "root", "", "demo");
if(isset($_POST["name"]))
{
$name = mysqli_real_escape_string($conn, $_POST["name"]);
$email = mysqli_real_escape_string($conn, $_POST["email"]);
$message = mysqli_real_escape_string($conn, $_POST["message"]);
$query = "INSERT INTO user_form(name, email, message) VALUES ('".$name."','".$email."','".$message."')";
if(mysqli_query($conn, $query))
{
echo '<p>You have entered</p>';
echo '<p>Name:'.$name.'</p>';
echo '<p>Email:'.$email.'</p>';
echo '<p>Message : '.$message.'</p>';
}
}
?>The above code will produce the following result -
The database updated with the inserted value -
Related Articles
Image popup on page load using HTML and jQueryjQuery loop over JSON result after AJAX Success
JavaScript display PDF in the browser using Ajax call
Submit a form data without page refresh using Ajax
Polling System using PHP, MySQL and Ajax
jQuery file upload progress bar
Retrieve data from database without page refresh using Ajax
Ajax live data search using jQuery PHP MySQL
Simple star rating system using PHP, jQuery and Ajax
jQuery loop over JSON result after AJAX Success
Php file based authentication
Simple PHP File Cache
How to get current directory, filename and code line number in PHP
Display PDF in the browser using Ajax
Bootstrap modal popup on page load