javascript - 如何创建带有列表提交的表单

Question

我正在尝试制作一个表单问题，人们可以在其中输入 1-10 件事的列表。然后，之后的问题将要求对列表中的每个元素进行解释(文本框)。我遇到了有关如何动态执行这些操作的问题。

我知道一个问题:

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

或者如果他们要列出两件事:

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input id="choice2" type="text" name="item2" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

接下来的问题是:

<h3 class="fs-subtitle">Explain why {listChoice1} is on your list</h3>
    <textarea id="explanation1" type="text" name="explanation1"></textarea>
    <input type="submit" name="submit" class="submit action-button next" value="Next" />

但有什么方法可以让他们清楚地允许他们将列表大小增加到他们想要的大小，然后动态地对列表中的每件事都有一个后续问题？

Answer 1

使用模板，然后使用 cloneNode 并跟踪索引。

var indexForm = 1;
var submit = document.querySelector("input[name='submit']");

submit.addEventListener("click", function(e){
  //first add explanation
  var div = document.querySelector("div.template");
  var title = div.children[1].cloneNode(true); //use true here to copy textnode too!
  var textarea = div.children[2].cloneNode();
  
  //change the values
  title.innerHTML = title.innerHTML.replace("{listChoice}", document.querySelector("#choice"+indexForm).value);
  textarea.id = "explanation" + indexForm;
  textarea.name = "explanation" + indexForm;
  
  //add the explanation to the DOM
  //select the input submit
  submit.parentNode.insertBefore(title, submit);
  submit.parentNode.insertBefore(textarea, submit);
  
  //add 1 to indexForm
  indexForm++;
  //add new input
  var newinput = div.children[0].cloneNode();
  newinput.id = "choice" + indexForm;
  newinput.name = "choice" + indexForm;
  submit.parentNode.insertBefore(newinput, submit);
  
  
  //do not execute form
  e.preventDefault();
})

div.hidden {
 display: none;
}

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

<div class="template hidden">
<input id="choice_template" type="text" name="item" placeholder="" />
<h3 class="fs-subtitle">Explain why {listChoice} is on your list</h3>
    <textarea id="explanation_template" type="text" name="explanation"></textarea>
</div>