PHP- Insert all table values to DB in a single click and edit value?

how to insert all table values into the database with a single submit button?

how to edit the tables values and update to the database?

for the following code snippet

in the code i want to insert into a database and display in another table with edit option.

the question is how to update the values to the already exsting values in the database with a single submit button.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <table id="myTable" class=" table order-list">
    <thead>
            <tr>
                <th width="5%">SI. No</th>
                <th width="45%">Items / Products</th>
                <th width="5%">Qty Requested</th>
                <th width="20%">Quantity Procured</th>
                <th width="10%">Specification</th>
                <th width="20%">Actions</th>
            </tr>
        </thead>
    <tbody>
        <!-- row will be dynamically add here 

            <tr>
            <td class="col-sm-0">
                <input type="text" name="sno" class="form-control" />
            </td>
            <td class="col-sm-4">
                <input type="mail" name="items"  class="form-control"/>
            </td>
            <td class="col-sm-3">
                <input type="text" name="qty_r"  class="form-control"/>
            </td>

            <td class="col-sm-4">
                <input type="text" name="qty_p" class="form-control" />
            </td>
            <td class="col-sm-4">
                <input type="mail" name="specification"  class="form-control"/>
            </td>
            <td class="col-sm-3">
                <input type="text" name="phone"  class="form-control"/>
            </td>

            <td class="col-sm-2"><a class="deleteRow"></a>

            </td>
        </tr>
        -->
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
        </tr>
    </tfoot>
</table>
<div class="form-group text-center">
        <label></label>
        <button type="submit" class="btn btn-warning" >Save <i class="glyphicon glyphicon-send"></i></button>
    </div>

</div>

<script>
$(document).ready(function () {
    var counter = 1;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" class="form-control" name="sno' + counter + '" value="'+counter+'" /></td>';
        cols += '<td><input type="text" class="form-control" name="items' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="qty_r' + counter + '"/></td>';

        cols += '<td><input type="text" class="form-control" name="qty_p' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="specification' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});


</script>

Answer

Please check it out. It works for me. I just added a name attribute in the input type and pass it via post method and don’t forget to rename index.html to index.php

Single Upload Only:

index.php

 <form method="POST" action="img.php">
        <img id="img" alt="image" width="100" height="100" />
    <input type="file" name="img_url" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
    <input type="submit" name="">

img.php

<?php 
echo $_POST['img_url'];

?>

Multiple Uplaod:

index.php

<form id="dynamicForm" method="POST" action="img.php">
    <b>This single img works but not in js</b> <br>
    <img id="img" alt="your image" width="100" height="100" />
    <input type="file" name="single_img" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">

    <br/>
    No of Img <input type="text" id="noi" value="" onkeyup="addFields()">
        <br />

     <div id="dynamicField"></div>
<input type="submit" name="">

<script> 


    function addFields(){
        // Number of inputs to create
        var number = document.getElementById("noi").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("dynamicField");
        var array = ["CRICTICAL","HIGH","LOW","INFO"];
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }


        for (i=1;i<=number;i++){

            var img = document.createElement("img");
            img.width="100";
            img.height="100";
            img.id="img "+i;

            var upload = document.createElement("input");
            upload.type="file";
            upload.name="file_"+i;
            upload.id="upload "+i;
            //Working_______________
            upload.onchange=upload.onchange= function () {

                var img_id=this.getAttribute('id');
                var imgId = img_id.charAt(7) ; 
                document.getElementById("img "+imgId).src = window.URL.createObjectURL(this.files[0])
            }

            //________________________________________
            container.appendChild(img);
            container.appendChild(upload);
            container.appendChild(document.createElement("br"));
        }
    } 
</script>

img.php

<?php 

$result =  $_POST;
$mul =  count($result);
if($mul>0){
    foreach ($result as $key => $value) {
        echo $value."<br>";
    }
}

?>