CODEWITHSUNDEEP
javascriptphp
user1627774
user1627774

Reputation: 43

Increase number of form inputs with js or php

I've created a script for a project using php and mysql to allow users to create questions with multiple choice answers. By default I've set it so that you can only have one question in your quiz but I am trying to add a button that when clicked you can add new input box's in order to add more questions to your quiz. I thought I should do this in javascript because it is client side and therefor wont alter what is already entered in the previous input boxes? I tried a for loop with a counter and increment the counter on click but this doesn't seem to work because I think the page needs to refresh. I don't mind if the solution is in php or javascript. 

var limit = 1;
function addQuestion(){
limit++;    

}

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

Upvotes: 1

Views: 758

Answers (4)

Hope4You
Hope4You

Reputation: 1947

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

If you use jQuery:

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

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

Upvotes: 1

Mark
Mark

Reputation: 1386

If I understood your question correctly, the way to go about doing this is JavaScript (no need to involve PHP).

Basically, when your button gets clicked, you need to call a function which will append the necessary elements to the DOM. Your for loop NEEDS to be inside of this function.

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

To explain, when your button gets clicked, JavaScript will call function addQuestion. All of your logic needs to be inside of that function (loops, appending/creating new elements etc.). If possible, use a library to help with this.

EDIT: I see the question has already been answered, however I am going to leave this answer as the other answers introduce unnecessary global variables and create elements from strings, which is not the best practice.

Upvotes: 0

aleation
aleation

Reputation: 4844

<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>

Upvotes: 0

diffie
diffie

Reputation: 147

Using jQuery:

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

Upvotes: 0

Related Questions