in this article, we will learn to submit a form data via jQuery ajax in PHP MySQL in an easy way.


Database table structure

create a database in your phpmyadmin and import the following database table structure for creating contact_us table

-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jan 26, 2021 at 12:56 AM
-- Server version: 10.4.17-MariaDB
-- PHP Version: 7.3.25

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `php-tutorial`
--

-- --------------------------------------------------------

--
-- Table structure for table `contact_us`
--

CREATE TABLE `contact_us` (
  `id` int(11) NOT NULL,
  `name` varchar(120) NOT NULL,
  `email` varchar(120) NOT NULL,
  `message` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `contact_us`
--

INSERT INTO `contact_us` (`id`, `name`, `email`, `message`) VALUES
(3, 'gajanand rathor', 'gajanand.kgn@gmail.com', 'test message');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `contact_us`
--
ALTER TABLE `contact_us`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `contact_us`
--
ALTER TABLE `contact_us`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Example

here we will create a contact us form and send Form data to PHP using jQuery ajax


index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PHP MySQL - jQuery Ajax Form Submit Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">

                    <h2>Contact us form</h2>
                    <div id="show_message" class="alert alert-success" style="display: none">Success fully sent message </div>
                    <div id="error" class="alert alert-danger" style="display: none"></div>
                    <form action="javascript:void(0)" method="post" id="ajax-form">

                        <div class="form-group">
                            <label>Full Name</label>
                            <input type="text" name="full_name" id="full_name" class="form-control" value="">
                        </div>

                        <div class="form-group ">
                            <label>Email</label>
                            <input type="text" name="email" id="email" class="form-control" value="">
                        </div>

                        <div class="form-group">
                            <label>Message</label>
                            <textarea  name="comment" id="comment" class="form-control"></textarea>
                        </div> 

                        <div>
                            <input type="submit" class="btn btn-primary btn-lg" name="submit" value="Submit">
                        </div>

                    </form>  
                </div> 
                <div class="col-md-2"></div>
            </div>
            <hr>
        </div>

        <footer class="text-center">&COPY; 2021 Rathorji</footer>

        <script type="text/javascript">
            $(document).ready(function($) {

                // hide messages 
                $("#error").hide();
                $("#show_message").hide();

                // on submit...
                $('#ajax-form').submit(function(e) {

                    e.preventDefault();

                    $("#error").hide();

                    //First name required
                    var name = $("input#full_name").val();
                    if (name == "") {
                        $("#error").fadeIn().text("Name Field required.");
                        $("input#full_name").focus();
                        return false;
                    }

                    // last name required
                    var email = $("input#email").val();
                    if (email == "") {
                        $("#error").fadeIn().text("Email Field required");
                        $("input#email").focus();
                        return false;
                    }

                    // Comment number required
                    var comment = $("#comment").val();
                    if (comment == "") {
                        $("#error").fadeIn().text("Message Field required");
                        $("input#comment").focus();
                        return false;
                    }

                    // ajax
                    $.ajax({
                        type: "POST",
                        url: "save_data.php",
                        data: $(this).serialize(),
                        success: function(data) {
                            $("#show_message").fadeIn();

                            console.log(data);

                        }
                    });
                });

                return false;
            });
        </script>
    </body>
</html>


Jquery Ajax send data to save_data.php

save_data.php there connect to the database and write a query to insert data in contact us a table of the database


save_data.php

<?php

$conn=mysqli_connect("localhost","root","","php-tutorial");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}

extract($_POST);

if(mysqli_query($conn, "INSERT INTO contact_us(name, email, message) VALUES('" . $full_name . "', '" . $email . "', '" . $comment . "')")) {
echo '1';
exit;
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}

mysqli_close($conn);
?>


Output:






Download source code

Are you facing problems in understanding this article? download source code now