[英]How do I use JavaScript to grow an HTML form?
我正在創建一個簡單的Web應用程序,用戶可以使用它來編寫帶有附件的消息。
帶有javascript鏈接的多個HTML文件輸入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>
並增加數字:Attachment2,Attachment3,Attachment4等。
我怎樣才能做到這一點?
您可以使用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
可能有更好的方法,但是我通過創建一組HTML表單元素,然后使用JavaScript隱藏/顯示行來更新CSS類來完成此客戶端操作。
編輯:我將把它留在這里作為替代方法,但我更喜歡通過DOM添加INPUT元素的想法。
您可能不想替換錨,只需在錨前面插入一些東西。
我將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);
});
...末尾的位找到包含鏈接的格式,找出有多少個類型file
input
,並為索引添加一個。
也可以通過Prototype提供的Element
構造函數來進行其他操作,但是文本效果很好(實際上,它通常要快得多)。
它與jQuery,MooTools,YUI,Glow或其他幾種JavaScript框架相似,但略有不同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.