Динамические строки с полями

Привет. Пробуем сделать форму с возможностью динамического добавления полей. Поговорим немного о динамических полях, а точнее для чего они вообще нужны. Это ситуация когда от пользователя требуется получить неизвестное количество значений через обычную html – форму, с набором инпутов, чекбоксов и т.п. Для этих целей удобно использовать форму с возможностью множественного добавления значений. Реализовать это дело удобно с помощью javascript, что мы и сделаем.

Форму делаем такого вида:

<form method="post">
<table border="1" id="v_table">
<thead>
<tr>
<th>xml_id</th>
<th>значение</th>
<th>сорт.</th>
<th>по умол.
<input type="radio" name="default" value="none" checked></th>
</tr>
</thead>
<tbody>
<tr>
	<td><input type="text" name="xml_id[0]"></td>
	<td><input type="text" name="values[0]"></td>
	<td><input type="text" name="val_sort[0]" value="500"></td>
	<td><input type="radio" name="default" value="0"></td>
</tr>
</tbody>
</table>

<input type="button" onclick="add_value_f()" value="Добавить поле"/>
<input type="submit" name="send" value="Сохранить">
</form>

Итак, что особенного в этой форме.

Тегу table присвоили id="v_table", для удобства обращения к строкам таблицы, внутри которых набор элементов формы.
По умолчанию у нас будет одна строка с формами ввода, после чего, кнопкой «Добавить поле» мы вызываем js функцию add_value_f(), именно она нам и будет добавлять дополнительные строки.
Т.к. планируется, что ввод может быть множественного значения, обращаем на имена полей ввода формы, они должны быть в виде массива, соответственно первая строка у нас имеет индекс 0.

Получиться такая форма:

Далее в заголовке либо в теле страницы добавляем блок js кода:

<script type="text/javascript">
var d = document;
var last_id = 0;
function add_value_f() {
	
	// находим нужную таблицу
    var tbody = d.getElementById('v_table').getElementsByTagName('tbody')[0];
	
	// создаем строку таблицы и добавляем ее
    var row = d.createElement("tr");
	tbody.appendChild(row);

    // создаем ячейки в вышесозданной строке
    var td1 = d.createElement("td");
    var td2 = d.createElement("td");
	var td3 = d.createElement("td");
	var td4 = d.createElement("td");

    row.appendChild(td1);
    row.appendChild(td2);
	row.appendChild(td3);
	row.appendChild(td4);
	
	last_id = last_id + 1;

	// добавляем поля в ячейки
    td1.innerHTML = '<input type="text" name="xml_id['+last_id+']">';
    td2.innerHTML = '<input type="text" name="values['+last_id+']">';
	td3.innerHTML = '<input type="text" name="val_sort['+last_id+']" value="500">';
	td4.innerHTML = '<input type="radio" name="default" value="'+last_id+'">';
}
</script>

Собственно это и есть функция add_value_f(), которая будет добавлять нам на форме новые строки. Проверяем форму:

Строки добавляются исправно, имена полям в коде задаются как надо. Собственно всё.
Теперь неплохо бы проверить, как приходят переменные к нам на сервер из этой формы. Для этого заполняем форму примерно так:

В итоге, после отправки формы, мы получаем на сервере такие переменные:

Array
(
    [xml_id] => Array
        (
            [0] => zn1
            [1] => zn2
            [2] => zn3
        )

    [values] => Array
        (
            [0] => Значение 1
            [1] => Значение 2
            [2] => Значение 3
        )

    [val_sort] => Array
        (
            [0] => 500
            [1] => 500
            [2] => 500
        )

    [default] => 1
    [send] => Сохранить
)

Как видно, переменные и их значения успешно пришли на сервер. Разумеется, форму можно менять для своих нужд. Здесь можно посмотреть рабочий пример.