How to insert data to MySql from PHP using jQuery AJAX · You will learn how to get data from html element using jQuery selector and send to PHP via AJAX


Create databse in phpmyadmin and then exucute following code to create table "user_data"

  CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Then you need to create 3 files to insert data in the MySql database using Ajax.

  1. database.php
  2. index.php
  3. save.php

#database.php

<?php
 $servername = "localhost";
 $username = "root";
 $password = "";
 $db="school";
 $conn = mysqli_connect($servername, $username, $password,$db);
?>


#index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Insert data in MySQL database using Ajax</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="margin: auto;width: 60%;">
            <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 id="fupForm" name="form1" method="post">
                <div class="form-group">
                    <label for="email">Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Name" name="name">
                </div>
                <div class="form-group">
                    <label for="pwd">Email:</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Phone:</label>
                    <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
                </div>
                <div class="form-group" >
                    <label for="pwd">City:</label>
                    <select name="city" id="city" class="form-control">
                        <option value="">Select</option>
                        <option value="Delhi">Delhi</option>
                        <option value="Mumbai">Mumbai</option>
                        <option value="Pune">Pune</option>
                    </select>
                </div>
                <input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">
            </form>
        </div>

        <script>
            $(document).ready(function() {
                $('#butsave').on('click', function() {
                    $("#butsave").attr("disabled", "disabled");
                    var name = $('#name').val();
                    var email = $('#email').val();
                    var phone = $('#phone').val();
                    var city = $('#city').val();
                    if (name != "" && email != "" && phone != "" && city != "") {
                        $.ajax({
                            url: "save.php",
                            type: "POST",
                            data: {
                                name: name,
                                email: email,
                                phone: phone,
                                city: city
                            },
                            cache: false,
                            success: function(dataResult) {
                                var dataResult = JSON.parse(dataResult);
                                if (dataResult.statusCode == 200) {
                                    $("#butsave").removeAttr("disabled");
                                    $('#fupForm').find('input:text').val('');
                                    $("#success").show();
                                    $('#success').html('Data added successfully !');
                                }
                                else if (dataResult.statusCode == 201) {
                                    alert("Error occured !");
                                }

                            }
                        });
                    }
                    else {
                        alert('Please fill all the field !');
                    }
                });
            });
        </script>
    </body>
</html>

#save.php

<?php
include 'database.php';
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$city = $_POST['city'];
$sql = "INSERT INTO `user_data`( `name`, `email`, `phone`, `city`) 
 VALUES ('$name','$email','$phone','$city')";
if (mysqli_query($conn, $sql)) {
    echo json_encode(array("statusCode" => 200));
} else {
    echo json_encode(array("statusCode" => 201));
}
mysqli_close($conn);
?>

When you run your project it will insert data in your database table let's run and see.

Download source code

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