jQuery Ajax serialize form data example
페이지 정보
작성자
운영자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 1,537회
작성일 22-03-26 15:46
본문
Database Table
To store the form data in back-end, we must have a database. In this article, we have 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 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 jQuery and Bootstrap libraries.
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 -
<!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"><댓글목록
등록된 댓글이 없습니다.