Как использовать JavaScript для создания HTML-формы?

Question

Я создаю простое веб-приложение, с помощью которого пользователь может создать сообщение с прикрепленными файлами.

multiple html file inputs with javascript link http://img38.imageshack.us/img38/4474/attachments.gif

что "прикрепить дополнительные файлы" ссылка пока не работает. Он должен добавлять дополнительный элемент ввода данных в форму при каждом нажатии.

Мне нужен JavaScript метод addanotherfileinput() заменить щелкнул якоря:

 <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a> 

С этой новой строки таблицы, ввод файла, и якорь:

 <input type="file" name="Attachment1" id="Attachment1" class="textinput" /> 
    </td> 
</tr> 
<tr> 
    <td></td> 
    <td> 
     <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a> 

А также увеличиваем номер: Приложение2, приложение3, приложение4 и т. д.

Как это сделать?

Answer 1

Вы можете использовать DOM для динамически вставить файл входов

var myTd = /* Get the td from the dom */ 

var myFile = document.createElement('INPUT'); 
myFile.type = 'file' 
myFile.name = 'files' + i; // i is a var stored somewhere 
i++; 

myTd.appendChild(myFile); 

ИЛИ вы можете использовать этот

http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html

Answer 2

Там может быть лучше, но я сделал это клиент бок создание набора элементов формы HTML, а затем скрытие/отображение строк с использованием JavaScript для обновления класса CSS.

EDIT: Я оставлю это здесь как альтернативный метод, но мне нравится идея добавления элементов INPUT через DOM лучше.

Answer 3

Вы, вероятно, не хотите заменить якорь, просто вставьте что-то перед ним.

Я использую Prototype для таких вещей, потому что он убирает много несовместимых браузеров, особенно вокруг форм и таблиц.

Используя прототип, это будет выглядеть примерно так:

function insertFileField(element, index) { 
    element.insert({ 
     before: "<input type='file' name='Attachment" + index + " class='textinput'>" 
    }); 
} 

// And where you're hooking up your `a` element (`onclick` is very outdated, 
// best to use unubtrustive JavaScript) 
$('attachlink').observe('click', function(event) { 
    event.stop(); 
    insertFileField(this, this.up('form').select('input[type=file]').length + 1); 
}); 

... бит в конце находит форму, содержащую ссылку, выясняет, сколько input s типа file есть, и добавляет один для индекса.

Есть и другие способы, используя конструктор Element, предоставленный Prototype, но текст работает достаточно хорошо (на самом деле, это обычно намного быстрее).

Он был бы похож, хотя и немного отличается, с jQuery, MooTools, YUI, Glow или любым из нескольких других фреймворков JavaScript.