Adding a HTML form on button click

Question

I am making a 'quiz website' for a school project but I am kind off stuck with one part.

We need to add questions to a quiz, so I want to make a button "Add Question" which adds 1 (or more) html form(s).

I have little JavaScript experience, and know just the basics.

My Laravel .blade file:

{{ Form::open(array('url'=>'quizzes/edit', 'class' => 'createquiz')) }}
    <p>Question 1</p>{{ Form::text('', null, array('placeholder' => 'Question 1', 'size' => '40', 'id' => 'questions')) }}
    <p>Question 2</p>{{ Form::text('', null, array('placeholder' => 'Question 2', 'size' => '40', 'id' => 'questions')) }}
    <p>Question 3</p>{{ Form::text('', null, array('placeholder' => 'Question 3', 'size' => '40', 'id' => 'questions')) }}
    <p>Question 4</p>{{ Form::text('', null, array('placeholder' => 'Question 4', 'size' => '40', 'id' => 'questions')) }}
<br>
<br>
{{ Form::button('Add Question', array('onclick' => 'addQuestion()', 'id' => 'questionadd')) }}
{{ Form::submit('Edit Quiz') }}
{{ Form::close() }}

My JavaScript:

function addQuestion() {
var node = document.createElement('FORM');
var counter = 1;
var limit = 3;

if (counter == limit)  {
    alert("You have reached the limit of questions");
}

else {
node.appendChild(FORM);
document.getElementById("questions").appendChild(node);
}

}

So on click of the "Add Question" button I want to have one question added right after the others

Answer 1

Okay from what I have gathered from your comments you are looking to do something like this:

<script>
var limit = 10; // Max questions
var count = 4; // There are 4 questions already

function addQuestion()
{
    // Get the quiz form element
    var quiz = document.getElementById('quiz');

    // Good to do error checking, make sure we managed to get something
    if (quiz)
    {
        if (count < limit)
        {
            // Create a new <p> element
            var newP = document.createElement('p');
            newP.innerHTML = 'Question ' + (count + 1);

            // Create the new text box
            var newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.name = 'questions[]';

            // Good practice to do error checking
            if (newInput && newP)   
            {
                // Add the new elements to the form
                quiz.appendChild(newP);
                quiz.appendChild(newInput);
                // Increment the count
                count++;
            }

        }
        else   
        {
            alert('Question limit reached');
        }
    }
}
</script>

<form id="quiz" action="" method="POST">

    <input type="button" value="Add question" onclick="javascript: addQuestion();"/>

    <p>Question 1</p>
    <input type="text" name="questions[]"/>
    <p>Question 2</p>
    <input type="text" name="questions[]"/>
    <p>Question 3</p>
    <input type="text" name="questions[]"/>
    <p>Question 4</p>
    <input type="text" name="questions[]"/>
    <p></p>


</form>

Take note of the comments and have a good read through the code to see what's happening. Hope this helps.

Answer 2

You can try using innerHTML with += operator. It allows you to append to the end of what ever you are appending to. Here is all the code:

<input type="button" onclick="appendQuestion()" value="Add new question">

Here is that function:

function appendQuestion()
{
Document.getElementById('questionDivContainer').innerHTML = "code for the new question";
}

Jquery append() would also work for you.

If you are serious about coding visit w3c or mdn. Microsoft also has a great guide for styling things somewhere. www.dribbble.com is an excellent resource for styling and inspiration you can find amazing wesites here http://www.awwwards.com/websites/clean/ Feel free to ask me any questions.