Load a Record with jQuery

Load one record after the user clicks a button. Store the stable record ID in data-id and send only that ID to the backend.

Record Buttons Top ↑

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

<div id="record-detail"></div>

Load Selected Record Top ↑

$( document ).on(
    "click",
    ".record-button",
    function () {
        const id =
            Number(
                $( this ).data( "id" )
            );

        $( "#record-detail" ).load(
            "record-detail.php",
            { id: id }
        );
    }
);

Backend Validation Top ↑

$id = filter_input(
    INPUT_POST,
    'id',
    FILTER_VALIDATE_INT
);

if (!$id || $id < 1) {
    http_response_code(400);
    exit('Invalid record ID');
}

$stmt = $dbo->prepare(
    'SELECT id, name, class, mark
     FROM student
     WHERE id = :id'
);

$stmt->execute(['id' => $id]);

See PDO connection, PDO records and multidimensional arrays.

Demo: load record details →

Download original load-record project

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<?Php
require "config.php";  // Database connection string

$sql="select id,name from student limit 0,10"; // Query to get records from student table 

echo "<table>";

foreach ($dbo->query($sql) as $row) {
echo "<tr><td>$row[id] </td><td> $row[name]</td><td><a value=$row[id] class='b_dtl'><img src=pt.gif></a></td><td><div id='$row[id]' class='my_dtl'> </div> </td> </tr>";
}

echo "</table>";
?>

Original example 2

var str=$(this).attr("value"); // Find out which button is clicked, its value

Original example 3

<div id='$row[id]' class='my_dtl'></div>

Original example 4

$("#"+str)

Original example 5

$("#"+str).load('load-display-dtl.php?str='+str);

Original example 6

$("#7").load('load-display-dtl.php?str=7');

Original example 7

$str=$_GET['str'];

Original example 8

echo "id: ".$my_array[$str]['id'].", Name: ".$my_array[$str]['name']." , Mark : ",$my_array[$str]['mark'];

Original example 9

<?Php
require "config.php"; // database connection details 
$str=$_GET['str']; // collect the student id

$count=$dbo->prepare("select * from student where id=:id");
$count->bindParam(":id",$str,PDO::PARAM_INT,3);

if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);
echo "id: ".$row->id.", Name: ".$row->name." , Mark : ",$row->mark;
}else{
echo "Database Problem ";
}

?>

Additional Original Learning Routes Top ↑

• button.php
• event-click.php
• http-get.php
• http-post.php
• load-class.php

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: