Почему при заполнении формы и нажатии на кнопку не прибавляются строки в таблице с данными ? JS

имеется 2 документа. 1й :

<form action="" id="add_persons" method="post" onsubmit="addRow();return false;"> <fieldset> <legend>Добавить сотрудника</legend> <ul> <li> <label for="name">Фамилия</label> <input type="text" name="name" id="name" value="" size="12" tabindex="1" /> </li> <li> <label for="initials">Инициалы</label> <input type="text" name="initials" id="initials" value="" size="12" tabindex="2" /> </li> <li> <label for="posada">Должность</label> <input type="text" name="posada" id="posada" value="" size="12" tabindex="3" /> </li> <li> <label for="subm">Действия</label> <input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" /> </li> </ul> </fieldset>

2й:

<table id="tab1" class="sortable"> <thead> <tr> <th>ФИО</th> <th>Должность</th> </tr> </thead> <tbody> </tbody> </table>

код js: var d = document;

var name;
var initials;
var posada;
function addRow()
{
    // считываем значени¤ с формы
    name = d.getElementById('name').value;
    initials = d.getElementById('initials').value;
    posada = d.getElementById('posada').value;
    // находим нужную таблицу
    var tbody = d.getElementById('tab1').getElementsByTagName('TBODY')[0];
    // создаем строку таблицы и добавляем ее
    var row = d.createElement("TR");
    tbody.appendChild(row);
    // создаем ячейки в вышесозданной строке
    // и добавляем их
    var td1 = d.createElement("TD");
    var td2 = d.createElement("TD");
    row.appendChild(td1);
    row.appendChild(td2);
    // наполняем ячейки
    td1.innerHTML = name+' '+initials;
    td2.innerHTML = posada;
}

вопрос: почему при заполнении формы и нажатии на кнопку не прибавляются строки в таблице с данными ? как это можно исправить если не правильно ? Не могу сообразить. Разделение на 2 документа - обязательно.