Question

我知道这可以用Javascript完成（我希望！）我的页面上有几个表单，但是我猜不出用户需要多少，所以有一些魔法可以在javascript中完成按下按钮：

 <input name="userfile[]" type="file" /><br />
    <input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />

是否已添加到指定区域？如果按下按钮，请记住在名称上添加一个数字，例如name =“imagedescription3” next name =“imagedescription4”等等 这可能是在互联网上发布的，我知道会是，我只是不知道如何用语言来表达我的问题

Answer 1

如果可能，我建议在项目中添加jQuery。它使DOM操作变得容易。

http://api.jquery.com/category/manipulation/

示例可能如下所示

<a href="#" id="myButton">Add Item</a>    
<div id="#wrapper">
        <input type="text" value="Description goes here." name="imagedescription1" maxlength="20" onfocus="this.value = '';" /><br />
        <input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
</div>    
        <script>
        $(function(){
            var i = 3; // i would be incremented with each add.
            $("#myButton").click(function(){
                $('<input type="text" value="Description goes here." name="imagedescription' + i + '" maxlength="20" onfocus="this.value = '';" /><br />').appendTo('#wrapper');
            });
            return false;
        });    

</script>

Answer 2

您可以编写一个JS函数来添加文本框，并在按下按钮时调用该函数。

这个功能应该沿着这些方向发展......

var count;
function functionName()
{
   count++;
   document.Write('<input type="text"  value="..." name="imagedescriptor'+count+'" max..');
}

希望它有效。

Answer 3

试试这个：

var i = 2;
var sourceTextNode = document.getElementsByName("imagedescription2")[0];
function createTextBox(){
    var newNode = sourceTextNode.cloneNode(false);
    newNode.setAttribute("name", ++i);
    var parent = sourceTextNode.parentNode;
    if(parent.lastchild == sourceTextNode) {
        parent.appendChild(newNode);
    } else {
        parent.insertBefore(newNode, sourceTextNode.nextSibling);
    }
}

function btnClicked(){
    createTextBox();
}

Answer 4

另一个jQuery解决方案：

<强> Live Demo

$("#f_add").click(function(e) {
    var field = document.createElement('input');
    $(field).attr('type', 'text');
    $(field).attr('name', 'field[]');
    $("#thenewhotness").append(field);
    e.preventDefault();
});

<form id="thenewhotness">
    <button id="f_add">Add Extra Field</button>
    <input type="text" name="field[]">
</form>

按下按钮时添加文本框

4 个答案: