Ask Question


Multiple jQuery table data insert in database PHP

Here we using 2 file for insert multiple checkbox value:

CREATE TABLE `append_date` (
`id` int(11) NOT NULL,
`Name` varchar(100) NOT NULL,
`Age` varchar(50) NOT NULL


<!DOCTYPE html>
<link rel="stylesheet" href="">
<script src=""></script>
<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="sname">
<div class="form-group">
<label for="pwd">Student Age:</label>
<input type="text" name="age" class="form-control" id="age">
<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+'">' + $("#sname").val() + '</td>\n\
<td width="100px" class="age'+newid+'">' + $("#age").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
var serializedData = $('#form1').serialize();
url: "save.php",
type: "post",
data: serializedData
$("#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 age = new Array();
for ( var i = 1; i <= lastRowId; i++) {
name.push($("#"+i+" .name"+i).html()); //pushing all the names listed in the table
age.push($("#"+i+" .age"+i).html()); //pushing all the ages listed in the table
var sendName = JSON.stringify(name);
var sendAge = JSON.stringify(age);
url: "save.php",
type: "post",
data: {name : sendName , age : sendAge},
success : function(data){
alert(data); // alerts the response from php.


$nameArr = json_decode($_POST["name"]);
$ageArr = json_decode($_POST["age"]);
// Check connection
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 append_date (Name, Age)
if (!mysqli_query($con,$sql))
die('Error: ' . mysqli_error($con));
Print "Data added Successfully !";

Buy Template