如何使用列表提交創建表單

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。