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。

如何使用列表提交创建表单

2 个答案: