By sending or entering or storing multiple data with a single click you will have to use Jquery and javcript code.

Here we using 2 file for Insert data from MySql database using Ajax.

  1. index.php
  2. insert-ajax.php


CREATE TABLE `user_data` (
   `id` int(11) NOT NULL,
   `Name` varchar(100) NOT NULL,
   `email` varchar(50) NOT NULL

The CREATE TABLE in MYSQL database is used to create a new table


<!DOCTYPE html>
        <link rel="stylesheet" href="">
        <script src=""></script>
        <div style="margin: auto;width: 60%;">
            <form id="form1" name="form1" method="post">
                <div class="form-group">
                    <label for="email">Student Name:</label>
                    <input type="text" name="sname" class="form-control" id="name">
                <div class="form-group">
                    <label for="pwd">Student email:</label>
                    <input type="text" name="email" class="form-control" id="email">
                <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
                <input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">
            <table id="table1" name="table1" class="table table-bordered">
            $(document).ready(function() {
                var id = 1;
                /*Assigning id and class for tr and td tags for separation.*/
                $("#butsend").click(function() {
                    var newid = id++;
                    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
        <td width="100px" >' + newid + '</td>\n\
        <td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\
        <td width="100px" class="email' + newid + '">' + $("#email").val() + '</td>\n\
        <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
                $("#table1").on('click', '.remCF', function() {
                /*crating new click event for save button*/
                $("#butsave").click(function() {
                    var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/
                    var name = new Array();
                    var email = new Array();
                    for (var i = 1; i <= lastRowId; i++) {
                        name.push($("#" + i + " .name" + i).html()); /*pushing all the names listed in the table*/
                        email.push($("#" + i + " .email" + i).html()); /*pushing all the emails listed in the table*/
                    var sendName = JSON.stringify(name);
                    var sendEmail = JSON.stringify(email);
                        url: "save.php",
                        type: "post",
                        data: {name: sendName, email: sendEmail},
                        success: function(data) {
                            alert(data); /* alerts the response from php.*/

The JSON.stringify () method converts a JavaScript object or value to a JSON string, optionally replacing values ​​if a replacement function is specified or optionally including only the specified properties if a replacement array is specified.


$nameArr = json_decode($_POST["name"]);
$emailArr = json_decode($_POST["email"]);
$con = mysqli_connect("localhost", "root", "", "php_ajax");
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
for ($i = 0; $i < count($nameArr); $i++) {
    if (($nameArr[$i] != "")) { /* not allowing empty values and the row which has been removed. */
        $sql = "INSERT INTO user_data (Name, email)
        if (!mysqli_query($con, $sql)) {
            die('Error: ' . mysqli_error($con));
Print "Data added Successfully !";