DOM и формы

[Удален]
665

Возникла проблема. Необходимо на JS генерить формы. Сделал изначально так:

<script>document.getElementById("uploads").innerHTML+="<div id='upload_form"+uploadi+"' style='display:block;'>"+

"<form method='post' enctype='multipart/form-data' action='"+getuploadfile+"'>"+
"<input type='hidden' name='UPLOAD_IDENTIFIER' value='"+uploadi+"' />"+
"<input type='hidden' name='uploadi' value='"+uploadi+"' />"+
"<input type='file' name='upl' id='upl"+uploadi+"' />"+
"<input type='submit' onclick='Go_Load("+uploadi+");return false;' value='Загрузить' />"+
"</form>"+
"</div>";</script>
Всё замечательно, всё работает... но IE вываливает ошибку. Ошибка ничего не говорящая "неизвестная ошибка". Суть удалось разузнать нескоро: не даёт IE создавать формы через innerHTML (IE же и придумал вроде эту замечательную вещь!) - только через DOM.

С DOM знаком не очень, получилось наваять следующее:

<script>

var parent = document.getElementById('uploads');
var newDIV = document.createElement('div');
newDIV.setAttribute('id',"upload_form"+uploadi);
newDIV.style.display = "block";
parent.appendChild(newDIV);
var parent = document.getElementById("upload_form"+uploadi);
var newFORM = document.createElement('form');
newFORM.setAttribute('id','uploadform'+uploadi);
newFORM.setAttribute('enctype',"multipart/form-data");
newFORM.setAttribute('method',"post");
newFORM.setAttribute('action',getuploadfile);
newFORM.onsubmit="return false;";
parent.appendChild(newFORM);
var parent = document.getElementById("uploadform"+uploadi);
var newINPUT = document.createElement('input');
newINPUT.type = "hidden";
newINPUT.name = "UPLOAD_IDENTIFIER";
newINPUT.value = uploadi;
parent.appendChild(newINPUT);
var parent = document.getElementById("uploadform"+uploadi);
var newINPUT = document.createElement('input');
newINPUT.type = "hidden";
newINPUT.name = "uploadi";
newINPUT.value = uploadi;
parent.appendChild(newINPUT);
var parent = document.getElementById("uploadform"+uploadi);
var newINPUT = document.createElement('input');
newINPUT.type = "file";
newINPUT.id = "upl"+uploadi;
newINPUT.name = "upl";
parent.appendChild(newINPUT);
var parent = document.getElementById("uploadform"+uploadi);
var newINPUT = document.createElement('input');
newINPUT.type = "submit";
newINPUT.onclick = "Go_Load("+uploadi+");return false;";
newINPUT.value = "Загрузить";
parent.appendChild(newINPUT);
alert(document.getElementById("uploads").innerHTML);
</script>
Но вот что-то не так видимо получилось... Такое ощущение, что обработчики для кнопки и для формы не срабатывают.... В чём ошибко?
AP
На сайте с 18.05.2008
Offline
25
#1

В аське куда-то пропал, держи суда тогда. Добавь нужное убери лишнее, код рабочий, проверял.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Заливаем фотки</title>

</head>

<html>

<head>

<script>

var countOfFields = 1; // Текущее число полей

var curFieldNameId = 1; // Уникальное значение для атрибута name

var maxFieldLimit = 5; // Максимальное число возможных полей

function deleteField(a) {

// Получаем доступ к ДИВу, содержащему поле

var contDiv = a.parentNode;

// Удаляем этот ДИВ из DOM-дерева

contDiv.parentNode.removeChild(contDiv);

// Уменьшаем значение текущего числа полей

countOfFields--;

// Возвращаем false, чтобы не было перехода по сслыке

return false;

}

function addField() {

// Проверяем, не достигло ли число полей максимума

if (countOfFields >= maxFieldLimit) {

alert("Число полей достигло своего максимума = " + maxFieldLimit);

return false;

}

// Увеличиваем текущее значение числа полей

countOfFields++;

// Увеличиваем ID

curFieldNameId++;

// Создаем элемент ДИВ

var div = document.createElement("div");

// Добавляем HTML-контент с пом. свойства innerHTML

div.innerHTML = "<input name=\"name_" + curFieldNameId + "\" type=\"file\" /> <a onclick=\"return deleteField(this)\" href=\"#\">[X]</a>";

// Добавляем новый узел в конец списка полей

document.getElementById("parentId").appendChild(div);

// Возвращаем false, чтобы не было перехода по сслыке

return false;

}

</script>

</head>

<body>

<form method="GET" action="#">

<div id="parentId">

<div>

<input name="name_1" type="file" />

<a onclick="return deleteField(this)" href="#">[X]</a>

</div>

</div>

<input class="s" type="submit" value="Залить!" />

</form>

<a onclick="return addField()" href="#">Добавить фото</a>

</body>

</html>

[Создание скриптов и сайтов на заказ] PHP/XML/MySQL/JavaScript/AJAX/ООП/Smarty/etc ICQ 950-954
[Удален]
#2

Спасибо. Немного не то: надо было именно форму вставлять скриптом, а не контролы формы. Впринципе забить, переделаю, чтобы форма была одна, вроде должно работать и так.

З
На сайте с 24.04.2008
Offline
54
#3

Можно форму через DOM создавать, а ее содержимое innerHTML'ем выдать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий