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>
Advertisement
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>"; } } ?>