jQuery Ajax serialize form data example
In this article, you will learn how to serialize form data and insert the data into 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 structure form data for presenting on another page or store into 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 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 have 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
Suppose, we have the following 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
Here is a simple example for demonstrating the usage of this method -
<!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 retrieve and insert 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 inserted value -
Related Articles
JavaScript display PDF in the browser using Ajax callHow to display PDF file in PHP from database
How to read CSV file in PHP and store in MySQL
Create And Download Word Document in PHP
PHP SplFileObject Standard Library
Simple File Upload Script in PHP
Sending form data to an email using PHP
Recover forgot password using PHP and MySQL
Php file based authentication
Simple PHP File Cache
How to get current directory, filename and code line number in PHP
