Goetz Pantana Goetz Pantana - 2 months ago 7x
jQuery Question

Update all data in a table without reloading the page

I need some example method to update all the data in a table that fetches from database but without reloading the whole page.

Here is the form:



Update All
is clicked it will update first row but not update with next or last row.

<?php include"dbConnect.php";
try { $sele=$con->prepare("SELECT*from tb2");$sele->execute();
<form method="post" name="form" action="">

<?php while($r = $sele->fetch(PDO::FETCH_ASSOC)) { ?>

<tr><td> <input type="hidden" class="kdid" value='<?php echo $r["kd"];?>'>
<input type="text" class="sklid" value='<?php echo $r["skl"];?>'> </td>
<td> <input type="text" class="nmid" value='<?php echo $r["name"];?>'> </td>

<?php } ?></table>
<input type="submit" class="upbtn" value="Update All"/></form>
<?php } catch(PDOException $e) { echo 'ERROR:' . $e->getMessage(); } ?>
<div id="look"></div>

<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" >
$(function() {
$(".upbtn").click(function() {
var kode = $(".kdid").val(); var ahli=$(".sklid").val();
var nama=$(".nmid").val();

var dataString = 'kdid='+ kode +'&sklid='+ ahli +'&nmid='+ nama;

type: "POST",
url: "updt.php",
data: dataString,
cache: false,
success: function(html){
}); return false;


if(isset($_POST['kdid'])) {
$up=$con->prepare("UPDATE tb2 set skl='".$_POST["sklid"]."',name='".$_POST["nmid"]."' where kd='".$_POST["kdid"]."'");

I think I need to make a loop, but how should I do that ?

Please give me any suggestions or code snippets that you think could be useful in solving the problem.

Thanks for your advices.


First put array notation to each input name attribute.

<form method="post" id="frid">
<?php foreach($sele as $r){ ?>

<tr><td> <input type="hidden" name="kd[]" value='<?php echo $r["kd"];?>'>
         <input type="text" name="skl[]" value='<?php echo $r["skl"];?>'> </td>
    <td> <input type="text" name="nm[]" value='<?php echo $r["name"];?>'> </td>

<?php } ?>
<input type="submit" value="Update All"/>

In client code side

$("#frid").submit(function() {
        type: "POST",
        url: "updt.php",
        data: $(this).serialize(),
        cache: false,
        success: function(data){
      }); return false;


<?php include"dbConnect.php";
$id = $_POST['kd'];

$sk = $_POST["skl"];
$ne = $_POST["nm"];

foreach($ne as $se) {
$up=$con->prepare("UPDATE tb2 set skl= :s, name= :n where kd= :k");
$up->bindValue('s', $sk[$i]);
$up->bindValue('n', $se);
$up->bindValue('k', $id[$i]);

$i++; }

This method still used serialize. Code may improve later.