使用 js 或 php 增加表单输入的数量 - Increase number of form inputs with js or php

>我使用 php 和 mysql 为一个项目创建了一个脚本，允许用户创建具有多项选择答案的问题。默认情况下，我已经设置了它，以便您在测验中只能有一个问题，但我正在尝试添加一个按钮，单击该按钮时，您可以添加新的输入框，以便向测验添加更多问题。我想我应该在 javascript 中执行此操作，因为它是客户端，因此不会更改在以前的输入框中已经输入的内容吗？我尝试了一个带有计数器的 for 循环并在单击时增加计数器，但这似乎不起作用，因为我认为页面需要刷新。我不介意解决方案是用 php 还是 javascript 编写的。

var limit = 1;
function addQuestion(){
limit++;    
}
for(var  i=1; i <= limit; i++){
document.write("Question "+i+":<input type='text' name='Question"+i+"'>"); 
}

<div id="inputFields">
   Question 1:<input type='text' name='Question1' /><br />
</div>
<button onclick="addQuestion();">New row</button>

如果你使用 jQuery：

var limit = 1;
function addQuestion(){
   limit++;    
   $("#inputFields").append("Question "+limit+":<input type='text' name='Question"+limit+"' /><br />"); 
}

或者普通的JavaScript：

var limit = 1;
function addQuestion(){
    limit++;    
    var theList = document.getElementById("inputFields");
    var newEl = document.createElement("p");
    var newText = document.createTextNode("Question "+limit+":");
    var newInput = document.createElement("input");
    newInput.type = "text";
    newInput.name = ("Question" + limit);
    newEl.appendChild(newText);
    newEl.appendChild(newInput);
    theList.appendChild(newEl);
}

使用 jQuery：

        var limit = 1;
        function addQuestion()
        {
            limit++;
            $('input:last').after('Question ' +limit +'<input type="text" name="Question '+limit+'" />');
        }

<form>
    <input type="text" /><br/>
</form>
<input type="button" id="add" value="Add Question">
<script>
    var limit = 5;
    //this is to target the form element, you could use an ID as well for example;
    var form = document.getElementsByTagName("form")[0];
    var button = document.getElementById("add");
    button.onclick = addQuestion;
    function addQuestion(){
        var currentInputs = form.elements.length;
        if(currentInputs < limit){
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            input.setAttribute('name', 'question'+(currentInputs+1));
            form.appendChild(input);
            form.appendChild(document.createElement("br"));
        } else {
            alert('maximum questions reached!');
        }
    }
</script>

如果我正确理解了你的问题，那么这样做的方法是JavaScript（不需要涉及PHP）。

基本上，当你的按钮被点击时，你需要调用一个函数，该函数会将必要的元素附加到 DOM 中。您的for循环需要在此函数内。

document.getElementById('button').addEventListener('click', function(){ addQuestion(3); }, false);
function addQuestion(limit)
{
    limit = limit || 1;
    var form = document.getElementById('my_form'), input;
    for (var i = 0; i < limit; i++)
    {
        input = document.createElement('input')
        input.type = 'text';
        input.className = 'foo';
        form.appendChild(input);
    }
}

解释一下，当你的按钮被点击时，JavaScript 会调用函数addQuestion。您的所有逻辑都需要在该函数中（循环，附加/创建新元素等）。如果可能，请使用库来帮助解决此问题。

编辑：我看到这个问题已经得到了回答，但是我将留下这个答案，因为其他答案引入了不必要的全局变量并从字符串创建元素，这不是最佳实践。