如何使用JavaScript生成HTML表单?
我正在创建一个简单的web应用程序,用户可以使用它编写带有附加文件的消息 “附加其他文件”链接尚未运行。它应该在每次单击表单时向表单添加一个额外的文件输入控件 我需要一个JavaScript方法addanotherfileinput()来替换单击的锚点:如何使用JavaScript生成HTML表单?,javascript,html,Javascript,Html,我正在创建一个简单的web应用程序,用户可以使用它编写带有附加文件的消息 “附加其他文件”链接尚未运行。它应该在每次单击表单时向表单添加一个额外的文件输入控件 我需要一个JavaScript方法addanotherfileinput()来替换单击的锚点: <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a> 使用此新表行、文件输入和
<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);
或者你可以用这个
可能有更好的方法,但我在客户端创建了一组HTML表单元素,然后使用JavaScript隐藏/显示行以更新CSS类
编辑:我将把它作为一种替代方法留在这里,但我更喜欢通过DOM添加输入元素的想法。您可能不想替换锚点,只需在其前面插入一些内容即可 我使用它来处理类似的事情,因为它消除了很多浏览器的不一致性,特别是在表单和表格方面 使用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);
});
函数insertFileField(元素,索引){
元素。插入({
before:“注意:我将所有文件inptus放在一个TD中,在您的情况下,您可能希望创建一个全新的行,但这样做与我在上面所做的差不多……它只是向文档中添加了一些dom元素。