javascript - 使用js或php增加表单输入的数量

Question

我使用 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+"'>"); 
}

Answer 1

<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);
}