Не отправляются на сервер данные из клонированных полей
 

Задача стоит такая: по нажатию кнопки добавляем определенную формочку с полями в основную форму.

Вроде задача тривиальная и решалась уже много раз, но нигде не нашел описание подобного глюка: формочка добавляется во всех броузерах, имена полей корректно заменяются.
Но, когда отправляешь форму на сервер по кнопке Submit в броузерах Mozila FireFox и Google Chrome - на сервер отсылаются все статичные поля, а динамично созданных нет :cray: .
В то же время при использовании IE - порядок: на сервере все поля и статичные и динамичные.

:blink: Как не ругают IE - а в этой задаче он уделал остальные броузеры!

Использую jQuery 1.4.2
Для отправки использую стандартную кнопку формы Submit, для формы установлен method=POST.

Функция которая добавляет строку в основную форму:

$("img.button_add_preparat").click(
	function(){
	// #table_pestecid - это основная таблица в которой есть статичные данные
	//#preparate_empty_new - DIV в котором содержится таблица с примерами нужных форм

	// для начала ищем номер последнего препарата
	if ($("#table_pestecid").find("tr.preparate_descript").size()>0){
	var Index = parseInt($("#table_pestecid").find("tr.preparate_descript").last().find("#index_i").attr('value'))+1;
	}else{
	var Index = 0;
	}

	// добавляем поле (нужна одна строка из таблицы - tr)
	$("#table_pestecid").append($("#preparate_empty_new").find("tr.preparate").clone(true));

	// получаем объект
	var ObjForm = $("#table_pestecid").find("tr.preparate").last().get(0);
	// переименовать поля
	var filed = new Array("preparate_id", "name", "percent", "form");
	for (var i=0; i<filed.length; i++){
		$(ObjForm).find('#'+filed[i]).attr('name', 'preparate[' + Index + '][' + filed[i] + ']');
		$(ObjForm).find("#" + filed[i]).attr('value', '');
		$(ObjForm).find('#'+filed[i]).attr('id', 'preparate[' + Index + '][' + filed[i] + ']');
	}
	}
)

В этом DIV я храню примеры нужных мне табличек. Упущу другие строки, дабы не загромодать кодом

<div id=preparate_empty_new style="display:none">
	<table>
	<tr class="preparate" style="">
		<input type="hidden" id="preparate_id" />
		<td><div id="TestObj"></div><input type="text" id="name" class="input"></td>
		<td><input type="text" id="percent" class="input"></td>
		<td><select id="form" class="input">
			<option value="0"></option>
			<?for ($i=0;$i<count($prep_forms);$i++){?>
				<option value="<?=$prep_forms[$i]["id"]?>"><?=$prep_forms[$i]["name"]?></option>
			<?}?>
			</select>
		</td>

		<td style="vertical-align:text-bottom">
			<img src="/newsite/admin/img/but_edit.gif" style="cursor:pointer;" class="preparate_button">
			<img src="/newsite/admin/img/but_delete.gif" style="cursor:pointer;" class="preparate_button_del">
		</td>
	</tr>
</table>
</div>

В php смотрю получаемые данные вывод:

<?
echo "<pre>";
print_r($_POST);
echo "</pre>";
exit;
?>

Ну и вот самое интересное: используя IE видим такой вывод:

А используя FireFox вот такое :blink:

:help:
Кто знает где грабля заложена!?

Спасибо за любые мысли на эту тему.

Два убитых дня на поиск решения...

А причина таких багов оказалось банальное незакрытие тега <form>.
Тоесть в конце формы не стоял тег </form>.
После того как я его поставил все заработало как часики!