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

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>

Answer 2

我想说的是，在输入 blur 时，您可以检查您的输入是否有值。如果有值，可以在jQuery中使用insertAfter在输入后加一个textarea，求解释。

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

使用以下 4 行 jQuery：

$(function() {
  /* if you leave a text input field */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* and the next item is not a textarea and this input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* create a textarea with a somewhat similar name */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* and insert it after this item */
      $( textarea ).insertAfter( this );
    }
  });
});

当你这样做的时候，你还不如为他们在列表中的下一个东西添加另一个文本输入（如果他们想添加那个），使用以下 6 行 jQuery：

$(function() {
  /* if you leave a text input field */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* and the next item is not a textarea and this input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* create a textarea with a somewhat similar name */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* and insert it after this item */
      $( textarea ).insertAfter( this );
      /* create a new text input */
      var newinput = "<input name='item"+(parseInt($(this).attr('name').substring(4))+1)+"' type='text' />";
      /* and insert it before the submit button */
      $( newinput ).insertBefore( $("input[type='submit']") );
    }
  });
});

https://codepen.io/anon/pen/OjmaxY/?editors=1010

这个方案只需要1个表单，只需要6行jQuery，不使用CSS。