AJAX HTML Javascript jQuery PHP Example MORE Videos New

How to Insert Multiple Data using PHP Ajax

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

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

Table user_data

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


<!DOCTYPE html>
    <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>
<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.*/


$nameArr = json_decode($_POST["name"]);
$emailArr = json_decode($_POST["email"]);
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 !";