1

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

4 回答 4

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);
}
于 2013-09-18T15:34:38.183 回答
0

使用 jQuery：

        var limit = 1;
        function addQuestion()
        {
            limit++;
            $('input:last').after('Question ' +limit +'<input type="text" name="Question '+limit+'" />');
        }
于 2013-09-18T15:44:59.083 回答
0 
<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>
于 2013-09-18T15:49:47.100 回答
0

如果我正确理解了您的问题，那么执行此操作的方法是 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 会调用 function addQuestion。您的所有逻辑都需要在该函数内部（循环、添加/创建新元素等）。如果可能，请使用库来帮助解决此问题。

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

于 2013-09-18T15:54:22.083 回答