Editing MySQL table row data by PHP & Ajax

SQL concepts used: UPDATE · WHERE

<?php
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
$mark = filter_input(INPUT_POST, 'mark', FILTER_VALIDATE_INT);
$name = trim((string) ($_POST['name'] ?? ''));
$class = trim((string) ($_POST['class'] ?? ''));
$sex = $_POST['sex'] ?? '';

if (!$id || $mark === false || $mark < 0 || $mark > 100 ||
    $name === '' || $class === '' || !in_array($sex, ['male', 'female'], true)) {
    http_response_code(422);
    exit('Invalid record data');
}

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

Part I : Update single data of a record

Editing a complete row in the browser

Give each displayed field a predictable id such as name_6 or mark_6. When the user clicks Edit, read the current values with textContent, create form controls with DOM methods, and avoid rebuilding the row with innerHTML.

const markNode = document.getElementById('mark_' + id);
const input = document.createElement('input');
input.type = 'text';
input.value = markNode.textContent.trim();

The same pattern can create inputs for name and class and radio buttons for sex. On Update, send the complete row to the PHP processor using POST.

const body = new URLSearchParams({
    id, mark, name, class: classValue, sex
});

const response = await fetch('display-record-edit2-ajaxck.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    body
});

Demo of editing all columns of a record

Validate and update the row in PHP

The processor should accept POST only, validate every field, then execute one prepared UPDATE. Return JSON so the browser can update the row without inserting server-generated HTML.

<?php
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
$mark = filter_input(INPUT_POST, 'mark', FILTER_VALIDATE_INT);
$name = trim((string)($_POST['name'] ?? ''));
$class = trim((string)($_POST['class'] ?? ''));
$sex = (string)($_POST['sex'] ?? '');

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

In production, add authentication, authorization and CSRF protection before the UPDATE.

Displaying message and updated record.

Part I : Edit single column 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: