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

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


 $servername = "localhost";
 $username = "root";
 $password = "";
 $conn = mysqli_connect($servername, $username, $password,$db);


<!DOCTYPE html>
        <title>Insert data in MySQL database using Ajax</title>
        <link rel="stylesheet" href="">
        <script src=""></script>
        <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>
            <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 class="form-group">
                    <label for="pwd">Email:</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                <div class="form-group">
                    <label for="pwd">Phone:</label>
                    <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
                <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>
                <input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">

            $(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 != "") {
                            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) {
                                    $('#success').html('Data added successfully !');
                                else if (dataResult.statusCode == 201) {
                                    alert("Error occured !");

                    else {
                        alert('Please fill all the field !');


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));

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