There are 2 documents. 1st:

<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>

2nd:

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

js code: 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; }

question: why when filling in the form and clicking on the button, the rows in the table with the data are not added? How can this be corrected if not correctly? I can not figure out. Division into 2 documents is mandatory.

  • Oddly enough, but it works. jsfiddle.net/4jboh00t . The handler must return false; And just in case, the function should be declared in the global scope. window.addRow = addRow; - Petr Chalov
  • @peter If you make a form and a table in one index.html document and connect the js file to it, then yes everything works) but if you put them in different documents (in one form only and in the second table), and connect this js file to each then when you click the button in the document where the form, in the second document where the table is added nothing, it is not generated. - user199894
  • Those. the form is obtained, and the table is on different pages, in which case you cannot do without a server-side script, for example php, and information storage: a database, files. Describe in more detail the essence of the problem. - Petr Chalov

0