リスト提出でフォームを作成する方法

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を使用して、入力後にテキストエリアを追加して説明を求めることができます。あなたはそれをやっている間

$(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); 
    } 
    }); 
}); 

、彼らがいることを追加したい場合は、あなたにも（リスト内の次のことのために別のテキスト入力を追加できます：jQueryの、次の4行で

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

）、jQueryの次の6行を有する：

$(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も使用しません。