CODEWITHSUNDEEP
javascripthtmldjango
wtreston
wtreston

Reputation: 1061

Javascript: Add the same form multiple times if the user requests it

I am building a website where a user can create a survey. One of the things I want to be able to do, is to allow the user to create as many questions as they want to for each survey they want to. The way I plan on doing this is having a base form on the html page, and then, using javascript, have an add button which will add the form over and over again, as the user repeatedly presses the 'add question' button.

How would I go about this?

Upvotes: 0

Views: 1966

Answers (1)

Iván García García
Iván García García

Reputation: 515

There are many ways to achieve this, I will give you an example. You will need:

  • An array of questions
  • A button to add a new question
  • A question template

To dynamically render the array of question in your HTML you can use a templating library like Handlebars.

Here you have a quick ugly example that illustrate this:

// Create an array of questions
var q = [];
q.push({text: ''});

// Create a template to render your questions
// In this example I use handlebars 
var source   = document.getElementById("question-template").innerHTML;
var template = Handlebars.compile(source);
var context = {questions: q};

function renderTemplate(){
  var html    = template(context);
  document.getElementById('questions-placeholder').innerHTML = html;
}

//Render the template with the first question
renderTemplate();

//Add an event so when the user clicks the button you add a new question
document.getElementById("newquestion").addEventListener('click', function(){
      // Add the new question
      q.push({text: ""});
      
      //Re-render the template
      renderTemplate();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>


<h1>Questions</h1>

<!-- The question template -->
<script id="question-template" type="text/x-handlebars-template">
<div id="questions">
  {{#each questions}}
    <div>
       <label> Write your question </label>
       <input type="text" />
    </div>
  {{/each}}
</div>
</script>

<!-- Here handlebars will render your questions -->
<div id="questions-placeholder"></div>

<!-- The button to add new questions -->
<button id="newquestion">Add question</button>

EDIT: I add a second example using Jquery since with the first you will need some kind of data-binding to keep data when re-render the template.

$(document).ready(function() {
    //Selector where you will add your questions
    var placeholder     = $("#questions-placeholder"); 
    
    // Selector for the button
    var add_button      = $("#newquestion"); 
    
    // Adding new fields when the user click the button
    $(add_button).click(function(e){ 
        e.preventDefault();
        $(placeholder).append('<div><label>Write your question: </label><input type="text"/></div>'); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Questions</h1>

<!-- Here Jquery will add your questions -->
<div id="questions-placeholder"></div>

<!-- The button to add new questions -->
<button id="newquestion">Add question</button>

Upvotes: 1

Related Questions