Question

我试图在每次单击时创建一个按钮来添加另一个输入框，但我还希望它在输入名称的末尾添加一个递增的数字。我有这个代码来添加更多输入。

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\" />";
}
</script>

我可以做些什么，以便每次添加新表单时，它会在name =“photo”的末尾添加一个更高的数字，以便我可以正确处理我的PHP脚本图像？

默认表格为：

 <input type="file" name="photo">

但是我想在每次输入新输入时都在照片的末尾添加一个数字来生成这样的输出。

 <input type="file" name="photo">
 <input type="file" name="photo2">
 <input type="file" name="photo3">
 <input type="file" name="photo4">

等

Answer 1

您可以在表单名称中使用[]，然后您的php脚本会自动将这些输入转换为数组，这样您甚至不必再担心附加数字了。

<input type="file" name="photo[]">

如果你想用javascript做，最简单的方法就是有一个跟踪输入数量的变量

var inputNumber = 0;
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\"" + inputNumber + " />";
    inputNumber++;
}

Answer 2

声明一个计数并将其初始化为0，然后在每次调用时增加它。

<script type="text/javascript">
var count=0;
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += '<input type=\"file\" name=\"photo\"'+count+' />;
    count++;
}
</script>

Answer 3

andeas的回答可能最适合这种特定情况。但一般来说，如果你想要一个在每次调用函数时都会增加的计数器，请尝试：

(function {
    var counter = 0;
    window.myfunction = function() {
        // do stuff, use counter if needed
        counter++;
    }
})();

counter可以被视为在此上下文中它是一个静态变量。

如何添加具有不同名称的多个输入框

3 个答案: