JulianJ JulianJ - 1 year ago 53
jQuery Question

Append a row to an html table with Jquery?

I have a simple form that inserts data into a mysql database and displays the data from the database including the one just posted with ajax in a table.
Currently the whole table gets refreshed after submitting the form but I am trying to figure how I can append a row to the table results that displays the data just submitted. Can anyone explain how I can achieve this?

The form

<div class="form-group">
<form class="" action="" id="post_data" method="post">
Post Data
<input id="input" name="input" type="text" class="form-control input-md">
<button type="submit" class="btn pull-right btn-primary" id="submit">

<div class="display" id="display"></div>

$(document).ready(function() {
$('#post_data').submit(function() {
url: 'process.php',
type: 'POST',
dataType: 'html',
data: $(this).serialize(),
success: function(newContent) {

return false;


$stmt = $db_conx->prepare('INSERT INTO ajax_test (input) VALUES (?)');
$stmt->bind_param('s', $input);
$sql = "SELECT input FROM ajax_test";
$result = mysqli_query($mysqli, $sql);

while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $id . "</td>";
echo "<td>" . $row["input"] . "</td>";
echo "</tr>";

Answer Source

use append() instead of html();


or if you want to add new content top of table