Haces una petición ajax al controlador o archivo php para que lo registre en la BBDD. Si registró, devuelve el mismo objeto enviado (json). Una vez devuelto, lo conviertes a tr (fila de tabla) y lo agregas a la tabla.
Supongamos que tu fichero registerkid.php, tiene el siguiente aspecto:
<?php
// retrieved is json
$status = DB->create($retrieved);
if($satus) {
} else {
}
Entonces haríamos la llamada:
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if(http.readyState === 4 && http.status === 200) {
var table = document.querySelector('table');
var lastChild = table.lastChild;
var newKid = json2trow(JSON.parse(http.responseText));
if(lastChild) {
insertAfter(lastChild, newKid);
} else {
table.appendChild(newKid);
}
} else if(http.readyState === 4 && http.status >= 400) {
// hacer algo con los errores devueltos
}
};
var data = {}; // your form data
http.open('POST', 'registerkid.php', true);
http.send('data='data); // send kid info
// insert a element after another
function insertAfter(element, toadd) {
element.parentNode.insertBefore(toadd, element.nextSibling);
}
// converts json to table row
function json2trow(json) {
var tr = document.createElement('tr');
for(var key in json) {
var td = document.createElement('td');
var text = document.createTextNode(json[key]);
td.appendChild(text);
tr.appendChild(td);
}
return tr;
}
Ahora asocias el evento click del botón Add Kid al código anterior:
var addkid = document.querySelector('#add');
addkid.addEventListener('click', function(e) {
e.preventDefault(); // evita submit del forumulario
/* AQUÍ COLOCA EL CÓDIGO ANTERIOR */
});
Vas a enviar la información del nuevo kid en formato JSON, así que debes de serializar el formulario y crear el JSON. Si no tienes experiencia en JS, usa JQuery.
Saludos.