Javascript:如果用户请求，多次添加相同的表单

Question

我正在建立一个网站，用户可以在其中创建调查。我希望能够做的一件事是允许用户为他们想要的每项调查创建尽可能多的问题。我计划这样做的方法是在 html 页面上有一个基本表单，然后使用 javascript，有一个添加按钮，当用户重复按下“添加问题”按钮时，该按钮将一遍又一遍地添加表单。

我该如何解决这个问题？

Answer 1

有很多方法可以实现这一点，我举个例子。您将需要:

• 一系列问题
• 用于添加新问题的按钮
• 问题模板

要在 HTML 中动态呈现问题数组，您可以使用像 Handlebars 这样的模板库。

这里有一个简单的丑陋的例子来说明这一点:

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

编辑:我使用 Jquery 添加第二个示例，因为在第一个示例中，您将需要某种数据绑定(bind)来在重新呈现模板时保留数据。

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