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

Have you had an attempt at writing the Javascript? Are you using pure Javascript or are you open to using a library such as jQuery? — Jonathon
– Jonathon, Commented Mar 26, 2015 at 10:44
Yes, I added it now. And no, just JavaScript. We're not allowed to use jQuery — Leguam
– Leguam, Commented Mar 26, 2015 at 13:14
Okay, so do you want to add a question to the current form or do you want to add another form with X questions? I'm assuming the first one. — Jonathon
– Jonathon, Commented Mar 26, 2015 at 13:28
Screenshot This is what it looks like, and I need to have another "Question" form added after clicking on the "Add question" button. — Leguam
– Leguam, Commented Mar 26, 2015 at 13:36

Jonathon · Accepted Answer · 2015-03-26 13:44:55Z

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.

what about adding of options if the question is multiple choice question? How the options are linked to the questions

www139 · Accepted Answer · 2015-03-26 11:05:28Z

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.

answered Mar 26, 2015 at 11:05

www139

5,2373 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

Adding a HTML form on button click

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related