Как на фронтэнде по двойному щелчку сменить название [[*pagetitle]] в таблице и при этом, чтобы изменения записались в базу?

<table>
    <tbody>
    <tr>
        <td id="titlepagetable">[[*pagetitle]]</td>
    </tr>
    </tbody>
</table>

<script type="text/javascript">
/*
$(document).on('submit', 'form', function(e) {
    e.preventDefault;
    // -- Тут сериализация формы и ajax запрос
})
*/
// JS-ом ловим двойной клик по названию
$('#titlepagetable').dblclick(function(){
    // отображаем формочку с полем для ввода нового названия
    $(this).append('<input name="tdtable-titlepage" type="hidden" value="[[+pagetitle]]"/>'); // без кнопки
});
</script>