Editing database records by user using PHP & Ajax

SQL concepts used: SELECT · UPDATE · WHERE · LIMIT

async function updateMark(id, mark) {
    const response = await fetch('display-record-edit-ajaxck.php', {
        method: 'POST',
        headers: {'Accept': 'application/json'},
        body: new URLSearchParams({id, mark})
    });

    const result = await response.json();
    if (!response.ok) throw new Error(result.message ?? 'Update failed');
    document.querySelector(`[data-mark-id="${id}"]`).textContent = result.mark;
}

<?php
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
$mark = filter_input(INPUT_POST, 'mark', FILTER_VALIDATE_INT);

if (!$id || $mark === false || $mark < 0 || $mark > 100) {
    http_response_code(422);
    echo json_encode(['message' => 'Invalid id or mark']);
    exit;
}

$stmt = $pdo->prepare('UPDATE student SET mark = :mark WHERE id = :id');
$stmt->execute(['mark' => $mark, 'id' => $id]);

echo json_encode(['id' => $id, 'mark' => $mark]);
?>

Why use Ajax

How the script work.

Demo of Record display with edit option

require "config.php"; // MySQL connection string
echo "<div id="msgDsp" STYLE="position: absolute; right: 0px; top: 10px;left:800px;text-align:left; FONT-SIZE: 12px;font-family: Verdana;border-style: solid;border-width: 1px;border-color:white;padding:0px;height:20px;width:250px;top:10px;z-index:1"> Edit mark </div>";

$count="SELECT name,id,class,mark,sex FROM student LIMIT 10";

$i=1;

echo "<br><br><br><table class='t1'><tr><th>Name</th><th>Class</th><th>Sex</th><th>Mark</th><th>Edit</th></tr>";
foreach ($dbo->query($count) as $row) {
$m=$i%2;
$sid='s' . $row['id'];
echo "<tr class='r$m'><td> $row[name] </td><td> $row[class]  </td><td> $row[sex] </td><td>  <div id=$row[id] STYLE="width:140px;">$row[mark]</div></td><td><input type=button id=$sid value='Edit' onclick=edit_field($row[id])></td></tr>";
$i=$i+1;
}
echo "</table>";

User clicks the Edit button

When the learner clicks Edit, create the input and Update button with DOM methods rather than assembling an HTML string. Read the current mark with textContent, keep the record ID in a data attribute, and pass the two values to the Fetch function shown above.

function editField(id) {
    const cell = document.querySelector(`[data-mark-id="${id}"]`);
    if (!cell) return;

    const currentMark = cell.textContent.trim();
    const input = document.createElement('input');
    input.type = 'number';
    input.min = '0';
    input.max = '100';
    input.value = currentMark;

    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = 'Update';
    button.addEventListener('click', () => updateMark(id, input.value));

    cell.replaceChildren(input, button);
}

Displaying status messages

Use one status element for success or validation messages. Assign plain text with textContent, then clear it with a callback-based timer as shown in the response-handling example below.

Backend PHP script to validate the record update

The endpoint should accept POST only, validate both fields before any database write, and return JSON. The public demo uses the same validation contract without modifying production data.

<?php
header('Content-Type: application/json; charset=UTF-8');

if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') {
    http_response_code(405);
    echo json_encode(['message' => 'POST requests only.']);
    exit;
}

$id = filter_var($_POST['id'] ?? null, FILTER_VALIDATE_INT, [
    'options' => ['min_range' => 1],
]);
$mark = filter_var($_POST['mark'] ?? null, FILTER_VALIDATE_INT, [
    'options' => ['min_range' => 0, 'max_range' => 100],
]);

if ($id === false || $mark === false) {
    http_response_code(422);
    echo json_encode(['message' => 'Enter a valid record ID and a mark from 0 to 100.']);
    exit;
}
?>

require "config.php"; // MySQL connection string
$count=$dbo->prepare("update student set mark=:mark WHERE id=:id");
$count->bindParam(":mark",$mark,PDO::PARAM_INT,3);
$count->bindParam(":id",$id,PDO::PARAM_INT,3);

$a = array('id'=>$id,'mark'=>$mark);
$a = array('data'=>$a,'value'=>array("status"=>"$status","message"=>"$message"));
echo json_encode($a); 

Receiving the updated record and displaying

const result = await response.json();
if (!response.ok) {
    throw new Error(result.message ?? 'Update failed');
}

const markCell = document.querySelector(`[data-mark-id="${result.id}"]`);
const messageBox = document.getElementById('msgDsp');

if (markCell) markCell.textContent = String(result.mark);
if (messageBox) {
    messageBox.textContent = result.message ?? 'Record updated.';
    setTimeout(() => {
        messageBox.textContent = '';
    }, 2000);
}

Part II : Edit all the columns of a record

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: