Multiple jQuery table data insert in database PHP

❮ Previous Next ❯

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
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.php

<!DOCTYPE html>
<html>
<head>
<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>
<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>
  <div class="form-group">
    <label for="pwd">Student Age:</label>
    <input type="text" name="age" class="form-control" id="age">
  </div>
	<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">
</form>

<table id="table1" name="table1" class="table table-bordered">
    <tbody>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        <tr>
        
    </tbody>
</table>
<script>
$(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();

    $.ajax({
        url: "save.php",
        type: "post",
        data: serializedData
    });

    $("#table1").on('click', '.remCF', function() {
        $(this).parent().parent().remove();
    });

   /* 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);
        $.ajax({
            url: "save.php",
            type: "post",
            data: {name : sendName , age : sendAge},
            success : function(data){
                alert(data);    /* alerts the response from php. */
                }
        });
        });
});
</script>
</body>
</html>

save.php

 <?php
$nameArr = json_decode($_POST["name"]);
$ageArr = json_decode($_POST["age"]);
$con=mysqli_connect("localhost","root","","student");
/* 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)
VALUES
('$nameArr[$i]','$ageArr[$i]')";
    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    }
}
Print  "Data added Successfully !";
mysqli_close($con);
?>

❮ Previous Next ❯