How to insert multiple form data to database from jquery table

Question

$(document).ready(function() {
    var id = 1;

    $("#butsend").click(function() {
        $("#table1").append('<tr valign="top">\n\
            <td width="100px">' + (id++) + '</td>\n\
            <td width="100px">' + $("#sname").val() + '</td>\n\
            <td width="100px">' + $("#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();
    });
});

<form id="form1" name="form1" method="post">
    <label>Student Name</label><input type="text" name="sname" id="sname"></br>
    <label>Student Age</label><input type="text" name="age" id="age"></br>
    <input type="button" name="send" value="send" id="butsend"></br>
    <input type="button" name="save" value="Save" id="butsave"></br>
</form>

<table id="table1" name="table1" border="0">
    <tbody>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th></th>
        <tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

I am adding multiple form data to table using jQuery.Then I want to send that added data to database table when click on save button.my sample code is here. Can you help me.Thanks http://jsfiddle.net/eruZC/3/

Answer 1

Need to return inserted value to the model as json type.

<style type="text/css">
    #table1 tr {
        vertical-align: top;
    }

        #table1 tr td {
            width: 100px;
        }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#butsend").click(function () {
            if (true) {//Check Validation
                $.ajax({
                    url: "save.php", type: "post",
                    data: $.param($('#form1').serializeArray()),
                    //data: JSON.stringify({}),//Pass json model
                    success: function (data) {
                        $("#table1").append('<tr><td>' + data.model.id + '</td><td>' + data.model.sname + '</td><td >' + data.model.age
                            + '</td><td><a class="remCF" data-id="' + data.model.id + '">Remove</a></td></tr>');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    },
                    complete: function (msg) {
                    }
                });
            }
        });

        $("#table1").on('click', '.remCF', function () {
            var $this = $(this).parents('tr');
            $.ajax({
                url: "remove.php", type: "post", dataTye: "json",
                data: { id: $(this).data('id') },
                success: function (data) {
                    $this.remove();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                },
                complete: function (msg) {

                }
            });
        });
    });
</script>

this an below example for ASP.net mvc 3 calling controller action method

i do no how to return json result i php

$.ajax({
     url: "/controllername/actionmethodname"
});

[HttpPost]
public JsonResult Add(News vm)
{
    using (var db = new Mvc3MDbContext())
    {
       //vm used contains id, name, etc
    }

    return Json(new { model = vm }, JsonRequestBehavior.AllowGet);
}

Answer 2

when you click the add button you can also call php to connect to your database and then insert the form data. doing something similar to the php below should allow you to both insert into your database and still display in your table. A quick google can provide additional info on using php to connect to a database and interacting with it.

$("#butsend").click(function() {
    $("#table1").append('<tr valign="top">\n\
        <td width="100px">' + (id++) + '</td>\n\
        <td width="100px">' + $("#sname").val() + '</td>\n\
        <td width="100px">' + $("#age").val() + '</td>\n\
        <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\
    </tr>');

    <?php
        #connect to DB
        $con=mysqli_connect("hostname","username","password","database_name");
        #Check connection
        if (mysqli_connect_errno())
        {
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
        }      
        #what you want to insert into the database
        $query = "INSERT INTO table_name (table_field_id,table_field_name,table_field_age) VALUES ($id, name, age)";
        #insert into database
        mysqli_query($con,$query);
        #close database connection
        mysqli_close($con);
    ?>
});

Answer 3

Follow these steps which might mork.

• Assign unique id dynamically with script for tr and td tags for separation
• With unique id, just get the values of tr and td tags.
• Save the values in a json object and POST it to PHP.
• With PHP, save the values received from script to Mysql database .

Following the above steps, Add this to your script tag

    $(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.
                }
        });
        });
});

Add this to PHP( save.php )

    <?php
$nameArr = json_decode($_POST["name"]);
$ageArr = json_decode($_POST["age"]);
$con=mysqli_connect("localhost","username","password","db_name");
// 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 table_name (Name, Age)
VALUES
('$nameArr[$i]','$ageArr[$i]')";
    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    }

}

Print  "All records added";

mysqli_close($con);
?>