Inline Record Editing with jQuery, PHP, JSON and MySQL

This workflow turns a displayed table row into an edit form, posts the changed values to a backend, receives JSON and updates the row without reloading the whole page.

Display Records with Edit Buttons Top ↑

The live demo is display.php. Each button carries its record ID with data-id.

<button type="button"
        class="edit-record"
        data-id="12">
    Edit
</button>

Enter Edit Mode Top ↑

Instead of creating duplicate global IDs such as id="name" in every row, keep editing controls scoped to the current row.

$( "#student-table" ).on(
    "click",
    ".edit-record",
    function () {
        const $row =
            $( this ).closest( "tr" );

        $row.addClass( "editing" );
    }
);

Post Updated Data Top ↑

$.post(
    "display-submit.php",
    {
        id: id,
        name: name,
        class: studentClass,
        sex: sex,
        mark: mark
    },
    null,
    "json"
)
.done(function ( response ) {
    if (
        response.value.status !==
        "success"
    ) {
        throw new Error(
            response.value.message
        );
    }

    updateRow(
        response.data
    );
})
.fail(function () {
    $( "#msgDsp" ).text(
        "Unable to update the record."
    );
});

Database Update Top ↑

$stmt = $connection->prepare(
    'UPDATE student
     SET name = ?,
         class = ?,
         sex = ?,
         mark = ?
     WHERE id = ?'
);

$stmt->bind_param(
    'sssii',
    $name,
    $class,
    $sex,
    $mark,
    $id
);

$stmt->execute();

Related PHP tutorials: MySQLi connection, UPDATE, JSON.

Original Source Examples Retained for Migration Reference Top ↑

These source-page examples are retained so no learner-purpose example is silently lost. Use the modern examples above as the recommended implementation.

Original example 1

echo "<table class='t1' ><tr><th>ID</th><th>Name</th><th>Class</th><th>Sex</th><th>Mark</th><th>Edit</th></tr>";

while ($row = $stmt->fetch_assoc()) {
$m=$i%2; // To manage row style using css file. 
$mark_id='mark_' . $row['id'];  // Div tag to manage Mark data
$name_id='name_' . $row['id'];
$class_id='class_' . $row['id'];
$sex_id='sex_' . $row['id'];
echo "<tr class='r$m' height=50><td>$row[id]</td><td><div id=$name_id >$row[name]</div></td><td><div id=$class_id>$row[class]</div></td><td ><div id=$sex_id >$row[sex]</div> </td><td><div id=$mark_id>$row[mark]</div>
</td><td><input type=button value='EDIT' class='edit' id=$row[id]></td></tr>";
$i=$i+1;  // To manage row style
}

echo "</table>";

Original example 2

var id=$(this).attr('id');

Original example 3

$('#'+id).attr('value','Update');

Original example 4

var value=$(this).attr('value');

Original example 5

var mark = $('#'+'mark_'+id).html(); // reading the default value for mark 
$('#'+'mark_'+id).html("<input type=text name=mark id=mark value='"+mark+"' size=5>")

var name = $('#'+'name_'+id).html(); // reading the defaul value for name
$('#'+'name_'+id).html("<input type=text name=name id=name value='"+name+"' size=10>")

Original example 6

var sex = $('#'+'sex_'+id).html();
if(sex=='male'){var s1='checked';
var s2='';
}
else{var s1='';
var s2='checked';
}
$('#'+'sex_'+id).html("<input type='radio' name='sex' id='sex' value='male' "+s1+">male <input type='radio' name='sex' id='sex' value='female' "+s2+">female")

Original example 7

if(value=='Update'){
var mark = $('#mark').val(); // Reading user entered data for Mark
var name = $('#name').val();
var sex = $('input[name=sex]:checked').val();
var class1 = $('#class1').val();

  $.post( "display-submit.php", {"id":id,"mark":mark,"name":name,"sex":sex,"class":class1},function(return_data,status){

  if(return_data.value.status=="success"){
  var id=  return_data.data.id;
$('#'+'mark_'+id).html(return_data.data.mark);
$('#'+'class_'+id).html(return_data.data.class);
$('#'+'sex_'+id).html(return_data.data.sex);
$('#'+'name_'+id).html(return_data.data.name);
$('#'+id).attr('value','EDIT');
 }else{
// Write your own message / function  for failure of data update 
  }
$("#msgDsp").html(return_data.value.message);
        
},"json");
}

Original example 8

<?Php
$id=$_POST['id'];
$mark=$_POST['mark'];
$name=$_POST['name'];
$sex=$_POST['sex'];
$class=$_POST['class'];

$message=''; // 
$status='success';              // Set the flag  
//sleep(2); // if you want any time delay to be added

//// Data validation starts ///
if(!is_numeric($mark)){ // checking data
$message= "Data Error";
$status='Failed';
 }

if(!is_numeric($id)){  // checking data
$message= "Data Error";
$status='Failed';
}

if($mark > 100 or $mark < 0 ){
$message= "Mark should be between 0 & 100";
$status='Failed';
}
//// Data Validation ends /////
if($status<>'Failed'){  // Update the table now

//$message="update student set mark=$mark, name
require "config.php"; // MySQL connection string
$stmt = $connection->prepare("update student set mark=?,name=?,class=?,sex=? WHERE id=?");
if ($stmt) {
$stmt->bind_param('isssi', $mark,$name,$class, $sex, $id);
$stmt->execute();
$no=$stmt->affected_rows;
$message= " $no  Record updated<br>";
}else{
echo $connection->error;
}
}else{

}// end of if else if status is success 
$a = array('id'=>$id,'mark'=>$mark,'name'=>$name,'class'=>$class,'sex'=>$sex);
$a = array('data'=>$a,'value'=>array("status"=>"$status","message"=>"$message"));
echo json_encode($a); 
?>

Additional Original Learning Routes Top ↑

Continue Learning jQuery

jQuery Tutorial Home jQuery Basic Structure Functions Used with jQuery jQuery Events jQuery Effects jQuery UI jQuery Exercises

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: